import { FC, useEffect, useState } from 'react';
import classNames from 'classnames';
import { useTranslation } from 'next-i18next';
import dynamic from 'next/dynamic';
import useLightBox from 'hooks/useLightBox';
import Title from '@/components/atoms/Title';

const LinkSelectSearcheable = dynamic(
  () => import('@/components/atoms/LinkSelectSearcheable'),
  { ssr: false }
);

interface BannerVideoProps {
  videoUrl: string;
  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 BannerVideoWithProjects: FC<BannerVideoProps> = ({
  videoUrl,

  projects,

  hero = { title: '', preTitle: '', tagTitle: 'p', tagPreTitle: 'p' }
}) => {
  useLightBox();
  const [projectsOptions, setProjectsOptions] = useState<any[]>([]);
  const { t } = useTranslation(['common', 'routes']);

  useEffect(() => {
    if (projects?.length) {
      const projectsArray = projects.map((p) => ({
        label: `${p?.city?.state?.name}, ${p?.city?.name}, ${p?.name}`,
        value: p?.slug,
        link: p.shouldRedirect ? p.redirectLink! : `${t('routes:/development')}/${p.slug}`
      }));

      setProjectsOptions(
        projectsArray.sort((a, b) => a.label.localeCompare(b.label))
      );
    } else {
      setProjectsOptions([]);
    }
  }, [projects]);

  const showHero = hero.title || hero.preTitle || projectsOptions.length;

  return (
    <div className="wrapper bg-dark tw-relative">
      <div
        className={classNames('tw-relative tw-w-full  w-overflow-hidden tw-min-h-[400px] tw-aspect-[1920/1080] tw-max-h-[calc(100vh-104px)]')}
      >
        <video
          src={videoUrl}
          autoPlay
          loop
          muted
          playsInline
          className={classNames(
            'tw-w-full tw-h-full  tw-object-cover tw-object-center',

          )}
        />

        <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-top-0 tw-bottom-0 tw-left-0 tw-right-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?.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>
                    <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>
                  </div>

                  {projectsOptions.length > 0 && (
                    <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>
    </div>
  );
};

export default BannerVideoWithProjects;