import React, { useState } from 'react';
import Image from 'next/image';
import { Navigation, Pagination } from 'swiper';
import classNames from 'classnames';
import { Swiper, SwiperSlide } from 'swiper/react';
import { useTranslation } from 'next-i18next';
import Link from 'next/link';
import email from '@/../public/images/layout/email.svg';
import mark from '@/../public/images/layout/mark.svg';
import phone from '@/../public/images/layout/phone.svg';
import prev from '@/../public/images/articles/arrow-prev.svg';
import next from '@/../public/images/articles/arrow-next.svg';
interface MapWithCitiesProps {
  title?: string;
  preTitle?: string;
  text?: string;
  cities?: any[];
  version?: string;
}

const MapWithCities: React.FC<MapWithCitiesProps> = ({ title, preTitle, text, cities, version = "v1" }) => {
  const { t } = useTranslation(['common']);
  return (
    <div className={classNames('wrapper  city')}>
      <div className="container py-7 py-md-14">
        <div className="row  pb-7 gy-1">
          <div className="col-span-12  mb-1">{preTitle && <p className="base-pretitle ">{preTitle}</p>}</div>
          <div className="col-span-12 col-lg-7">
            {title && <h2 className="base-title !tw-text-main-color">{title}</h2>}
          </div>
          <div className="col-span-12 col-lg-5">{text && <p className="base-text ">{text}</p>}</div>
        </div>
        <div className="pb-2">
          {(cities && Array?.isArray(cities) && cities?.length && (
            <Swiper
              spaceBetween={0}
              modules={[Navigation, Pagination]}
              navigation={{
                nextEl: '.cities-carousel-next',
                prevEl: '.cities-carousel-prev'
              }}
              loop={true}
              slidesPerView={1}
              className="tw-mb-8 cities-carousel"
              pagination={{
                el: '.cities-pagination',
                clickable: true,
                bulletClass: 'cities-bullet',
                bulletActiveClass: 'cities-bullet-active'
              }}
            >
              {cities?.map((city, key) => (
                <SwiperSlide key={key} className="">
                  <div className="row g-7">
                    <div className="col-12 col-lg-7">
                      <div className="tw-relative">
                        {city.mapImage && (
                          <Image
                            src={city.mapImage.url}
                            height={city.mapImage.height}
                            width={city.mapImage.width}
                            alt="map image"
                            className="tw-w-full tw-h-auto "
                          />
                        )}
                      </div>
                    </div>
                    <div className="col-12 col-lg-5">
                      <div className="tw-bg-main-light  ">
                        <Link href={'/' + city?.slug}>
                          <div className="tw-relative tw-w-full  ">
                            {city.horizontalThumbnail && (
                              <Image
                                src={city.horizontalThumbnail.url}
                                height={city.horizontalThumbnail.height}
                                width={city.horizontalThumbnail.width}
                                className="tw-w-full tw-aspect-[5/3] tw-object-cover"
                                alt="thumbnail"
                              />
                            )}
                          </div>
                        </Link>
                        <div className={classNames("p-4 ", { "tw-bg-white": version === "v2" }, { "tw-bg-[#F4F0E4]": version === "v1" })}>
                          <div className="tw-flex tw-gap-2 tw-justify-between tw-items-center">
                            <div className="">
                              <Link
                                href={'/' + city?.slug}
                                className="pb-1 tw-font-inter tw-font-extrabold tw-text-lg md:tw-text-2xl tw-text-main-dark  "
                              >
                                {city?.name}
                              </Link>
                              <p className="base-text !tw-text-base !tw-font-semibold tw-uppercase">{city?.state?.name}</p>
                            </div>{' '}
                            <div className="tw-w-max">
                              <Link
                                href={'/' + city?.slug}
                                className="tw-font-inter tw-text-xs tw-font-semibold tw-text-main-color px-4 py-3 tw-rounded tw-border tw-border-main-color tw-uppercase hover:tw-bg-main-color hover:tw-text-main-light tw-block tw-text-center"
                              >
                                {t('common:knowMore')}
                              </Link>
                            </div>
                          </div>
                          {(city?.contactEmail && (
                            <Link
                              href={'mailto:' + city?.contactEmail}
                              target="_blank"
                              className="mb-2  tw-flex tw-items-center tw-gap-2 tw-max-w-full hover:tw-opacity-50"
                            >
                              <Image src={email} alt="email-icon" className="tw-flex-shrink-0 tw-w-5 tw-h-5" />
                              <span className="base-text !tw-text-base tw-break-all tw-whitespace-normal tw-leading-snug tw-w-[calc(100%-25px)] ">
                                {city?.contactEmail}
                              </span>
                            </Link>
                          )) ||
                            ''}
                          {(city?.phoneNumber && (
                            <Link
                              href={'tel:' + city?.phoneNumber}
                              target="_blank"
                              className="mb-2  tw-flex tw-items-center tw-gap-2 tw-max-w-full hover:tw-opacity-50"
                            >
                              <Image src={phone} alt="phone-icon" className="tw-flex-shrink-0 tw-w-5 tw-h-5" />
                              <span className="base-text !tw-text-base tw-break-all tw-whitespace-normal tw-leading-snug tw-w-[calc(100%-25px)] ">
                                {city?.phoneNumber}
                              </span>
                            </Link>
                          )) ||
                            ''}
                          {(city?.linkGoogleMaps && (
                            <Link
                              href={city?.linkGoogleMaps}
                              target="_blank"
                              className=" tw-flex tw-items-center tw-gap-2 tw-max-w-full hover:tw-opacity-50"
                            >
                              <Image src={mark} alt="phone-icon" className="tw-flex-shrink-0 tw-w-5 tw-h-5" />
                              <span className="base-text !tw-text-base tw-break-all tw-whitespace-normal tw-leading-snug tw-w-[calc(100%-25px)] tw-underline">
                                {t('common:seeInGoogle')}
                              </span>
                            </Link>
                          )) ||
                            ''}
                        </div>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          )) ||
            ''}
        </div>
        <div className="row g-7">
          <div className="col-12 col-lg-5 offset-lg-7">
            <div className="tw-flex tw-gap-4 tw-justify-between tw-items-center">
              <div className="hover:tw-opacity-50  cities-carousel-prev  ">
                <Image src={prev} alt="prev" className="!tw-min-w-[15px]" />
              </div>
              <div>
                <div className="cities-pagination tw-flex  tw-flex-wrap tw-gap-2 tw-items-center tw-justify-center"></div>
              </div>
              <div className="hover:tw-opacity-50  cities-carousel-next ">
                <Image src={next} alt="next" className="!tw-min-w-[15px]" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MapWithCities;