import useLightBox from 'hooks/useLightBox';
import { FC, useEffect, useState } from 'react';
import Carousel from '../../organisms/layout/Carousel';
import classNames from 'classnames';
import { useTranslation } from 'next-i18next';
import dynamic from 'next/dynamic';
import Title from '@/components/atoms/Title';
import BannerSliderWithprojects from './BannerSliderWithCities';
const LinkSelectSearcheable = dynamic(() => import('@/components/atoms/LinkSelectSearcheable'), { ssr: false });
interface ItemSliderProps {
  items: any[];
  theme?: string;
  projects?: any[];
  isSmaller?: boolean;
  hero?: {
    title: string;
    preTitle: string;
    tagTitle?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
    tagPreTitle?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
  };
}

const BannerSostenibilidad: FC<ItemSliderProps> = ({
  items,
  theme = 'dark',
  projects,
  isSmaller = false,
  hero = { title: '', preTitle: '', tagTitle: 'p', tagPreTitle: 'p' }
}) => {
  useLightBox();

  const showHero = hero.title || hero.preTitle || projects;
  const [projectsOptions, setprojectsOptions] = useState<any[]>([]);
  const { t } = useTranslation(['common', 'routes']);
  useEffect(() => {
    if (projects && Array?.isArray(projects) && projects?.length) {
      const projectsArray = projects?.map((p) => {
        return {
          label: p?.city?.state?.name + ', ' + p?.city?.name + ', ' + p?.name,
          value: p?.slug,
          link: p.shouldRedirect ? p.redirectLink! : `${t('routes:/development')}/${p.slug}`
        };
      });
      const sortedItems = projectsArray?.sort((a, b) =>
        a.label.localeCompare(b.label)
      );
      setprojectsOptions(sortedItems);
    } else {
      setprojectsOptions([]);
    }
  }, [projects]);

  return (
    <div className="wrapper bg-dark tw-relative">
      <div
        className={classNames('swiper-container swiper-hero dots-over ', {
          '!tw-h-[500px] !tw-max-h-[500px]': isSmaller
        })}
      >
        {items && Array?.isArray(items) && items?.length ? (
          <Carousel
            navigation={false}
            loop={true}
            slidesPerView={1}
            autoplay={{ delay: 7000, disableOnInteraction: true }}
            touchStartPreventDefault={false}
            slideClassName={classNames({ '!tw-h-[500px] !tw-max-h-[500px]': isSmaller })}
          >
            {items.map((item, key) => (
              <div
                key={key}
                className={classNames(
                  //{ ' bg-overlay bg-overlay-400 bg-dark ': theme == 'dark' },
                  { '!tw-h-[500px] !tw-max-h-[500px]': isSmaller },
                  'swiper-slide bg-image tw-flex'
                )}
                style={{ backgroundImage: `url("${item?.image?.url}")` }}
              >
                <div className="tw-absolute tw-bg-[#1E1E1E4D] tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-z-1" />
                {showHero && (
                  <div className="tw-absolute tw-inset-0 tw-flex tw-items-center tw-z-10">
                    <div className="tw-w-full tw-pointer-events-auto">
                      <div className="container">
                        <div className="row justify-content-center">
                          <div className="col-12 col-md-8 text-center">
                            <Title
                              tag={hero?.tagTitle || 'p'}
                              className="tw-font-ibm tw-text-5xl md:tw-text-[64px] tw-font-normal tw-text-main-light tw-mb-10"
                            >
                              {hero.title}
                            </Title>
                            <Title
                              tag={hero?.tagPreTitle || 'p'}
                              className="tw-font-ibm tw-text-base md:tw-text-xl tw-font-semibold  tw-text-main-light tw-uppercase tw-mb-5"
                            >
                              {hero.preTitle}
                            </Title>
                          </div>
                          {(projectsOptions && Array?.isArray(projectsOptions) && projectsOptions?.length && (
                            <div className="col-12 col-md-7 tw-relative tw-z-10  tw-pointer-events-auto">
                              <LinkSelectSearcheable
                                options={projectsOptions}
                                placeholder={t('common:city-state-project')}
                              />
                            </div>
                          )) ||
                            ''}
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </Carousel>
        ) : (
          ''
        )}
      </div>
    </div>
  );
};

export default BannerSostenibilidad;