'use client';

import React, { useCallback, useEffect, useState } from 'react';
import checkIcon from '@/../public/images/projects/check.png';

import Image from 'next/image';
import Link from 'next/link';
import classNames from 'classnames';
import { useTranslation } from 'next-i18next';

import { StylesConfig } from 'react-select';

import dynamic from 'next/dynamic';

const Select = dynamic(() => import('react-select'), { ssr: false });
import bedIcon from '@/../public/images/projects/bed-icon.svg';
import areaIcon from '@/../public/images/projects/area-icon.svg';
import showerIcon from '@/../public/images/projects/shower-icon.svg';
type Props = {
  projects: any[];
  cities?: any[];
};

const ProjectsGrid: React.FC<Props> = ({ projects, cities }) => {
  const { t } = useTranslation(['common', 'routes']);
  const projectPath = t('routes:/development');
  const incrementStep = 6;
  const [projectsToShow, setProjectsToShow] = useState(incrementStep);
  const apiUrl = process.env.NEXT_PUBLIC_API_URL || '';
  const [search, setSearch] = useState('');
  const [status, setStatus] = useState('');
  const [city, setCity] = useState<any>(null);
  const [filteredProjects, setFilteredProjects] = useState<any[]>([]);
  const [citiesOptions, setCitiesOptions] = useState<any[]>([]);

  useEffect(() => {
    if (cities && Array?.isArray(cities) && cities?.length) {
      const citiesArray = cities?.map((city) => {
        return { label: city?.name + ', ' + city?.state?.name, value: city?.slug };
      });
      setCitiesOptions(citiesArray);
    } else {
      setCitiesOptions([]);
    }
  }, [cities]);

  useEffect(() => {
    if (projects && projects.length) {
      if (search || status || city) {
        onChangeFilters();
      } else {
        const sortedItems = projects && projects?.length
          ? projects?.sort((a, b) => a.name.localeCompare(b.name))
          : [];
        setFilteredProjects(sortedItems);
      }
    }
  }, [projects, search, status, city]);
  useEffect(() => {
    setProjectsToShow(incrementStep);
  }, [projects]);
  const onChangeStatus = useCallback((statusName: string) => {
    setStatus((prevStatus) => (prevStatus === statusName ? '' : statusName));
  }, []);
  const onChangeFilters = useCallback(() => {
    const filteredData: any[] = projects?.filter(
      (project: any) =>
        (!search ||
          project?.name?.toLowerCase().includes(search.toLowerCase()) ||
          project?.city?.name?.toLowerCase().includes(search.toLowerCase())) &&
        (!status || project?.projectStatus?.name?.toLowerCase().includes(status.toLowerCase())) &&
        (!city || project?.city?.slug?.toLowerCase().includes(city?.value?.toLowerCase()))
    );
    const sortedItems = filteredData && filteredData?.length
      ? filteredData?.sort((a, b) => a.name.localeCompare(b.name))
      : [];

    setFilteredProjects(sortedItems);
  }, [projects, search, status, city]);
  const customStyles: StylesConfig<any> = {
    control: (base) => ({
      ...base,

      border: 'solid 1px #D4D4D4'
    }),
    singleValue: (base) => ({
      ...base,
      color: '#97999B',
      fontFamily: '"Inter", sans-serif',
      fontSize: '12px',
      fontWeight: 400
    }),
    input: (base) => ({
      ...base,
      color: '#97999B',
      fontFamily: '"Inter", sans-serif',
      fontSize: '12px',
      fontWeight: 400
    }),
    placeholder: (base) => ({
      ...base,
      color: '#97999B',
      fontFamily: '"Inter", sans-serif',
      fontSize: '12px',
      fontWeight: 400
    }),
    indicatorSeparator: () => ({
      display: 'none'
    }),
    dropdownIndicator: (base) => ({
      ...base,
      color: '#5F5F5F',
      padding: 4,
      '&:hover': {
        color: '#5F5F5F'
      }
    }),
    menu: (base) => ({
      ...base,
      backgroundColor: '#FFFFFF',
      boxShadow: 'none',
      border: '1px solid rgba(245, 242, 232, 0.2)',
      zIndex: 50,
      color: '#97999B',
      fontFamily: '"Inter", sans-serif',
      fontSize: '12px',
      fontWeight: 400
    }),
    menuList: (base) => ({
      ...base,
      maxHeight: '180px',
      overflowY: 'auto'
    }),
    option: (base, state) => ({
      ...base,
      backgroundColor: state.isFocused || state.isSelected ? '#EDE8D8' : 'transparent',
      color: '#5F5F5F',
      '&:hover': {
        backgroundColor: '#EDE8D8'
      }
    })
  };

  return (
    <section id="projects-section " className="tw-py-8 tw-relative">
      <div className="container ">
        <div className="row">
          <div className="col-md-12">
            <p className=" tw-text-base md:tw-text-xl  tw-text-main-color tw-font-ibm tw-font-semibold  tw-uppercase tw-text-center">
              {t('common:projects.preTitle')}
            </p>
            <h2 className="base-title tw-text-center !tw-text-main-color tw-my-4">{t('common:projects.title')}</h2>
          </div>
        </div>
        <div className="row gy-2 tw-pb-7 md:tw-pt-7">
          <div className="tw-grow-1 col-12 col-md-6 col-lg-3 col-xl-4  ">
            <div className="widget tw-relative tw-h-full">
              <input
                type="text"
                // value={search}
                onChange={(e) => {
                  setSearch(e?.target?.value || '');
                }}
                placeholder={t('common:projects.search')}
                className="tw-w-full tw-h-full  tw-text-[#D4D4D4] focus:tw-text-[#D4D4D4] tw-py-2 tw-px-4 tw-pr-10 tw-border tw-border-[#D4D4D4] tw-rounded-md tw-shadow-sm tw-outline-none focus:tw-ring-2 focus:tw-ring-main-color tw-text-xs"
              />
              <i className="uil uil-search tw-text-xl tw-absolute tw-right-3 tw-top-[5px] tw-text-black tw-z-10"></i>
            </div>
          </div>
          <div className=" col-12 col-md-6 col-lg-3">
            {' '}
            <Select
              isClearable
              defaultValue={city}
              onChange={setCity}
              options={citiesOptions}
              placeholder={t('common:footer.selectCity')}
              styles={customStyles}
            />
          </div>

          <div className=" col-lg-6 col-xl-5 tw-hidden min-[992px]:tw-grid tw-grid-cols-3 tw-gap-4 ">
            {' '}
            <div className="">
              <button
                onClick={() => {
                  onChangeStatus(t('common:projects.new'));
                }}
                className={classNames(
                  { 'tw-bg-main-color text-white': status === t('common:projects.new') },
                  {
                    'hover:tw-bg-main-light hover:tw-text-dark-gray tw-text-dark-gray ':
                      status !== t('common:projects.new')
                  },
                  ' tw-w-full tw-text-base tw-py-2 tw-px-2 tw-border tw-border-[#D4D4D4] tw-rounded-md tw-shadow-sm tw-outline-none focus:tw-ring-2'
                )}
              >
                <span className="tw-font-inter tw-font-semibold tw-text-xs  ">{t('common:projects.new')}</span>
              </button>
            </div>
            <div>
              <button
                onClick={() => {
                  onChangeStatus(t('common:projects.inDevelopment'));
                }}
                className={classNames(
                  { 'tw-bg-main-color text-white': status === t('common:projects.inDevelopment') },
                  {
                    'hover:tw-bg-main-light hover:tw-text-dark-gray tw-text-dark-gray ':
                      status !== t('common:projects.inDevelopment')
                  },
                  ' tw-w-full tw-text-base tw-py-2 tw-px-2 tw-border tw-border-[#D4D4D4] tw-rounded-md tw-shadow-sm tw-outline-none focus:tw-ring-2'
                )}
              >
                <span className="tw-font-inter tw-font-semibold tw-text-xs  ">
                  {t('common:projects.inDevelopment')}
                </span>
              </button>
            </div>
            <div>
              <button
                onClick={() => {
                  onChangeStatus(t('common:projects.finished'));
                }}
                className={classNames(
                  { 'tw-bg-main-color text-white': status === t('common:projects.finished') },
                  {
                    'hover:tw-bg-main-light hover:tw-text-dark-gray tw-text-dark-gray ':
                      status !== t('common:projects.finished')
                  },
                  'tw-w-full tw-text-base tw-py-2 tw-px-2 tw-border tw-border-[#D4D4D4] tw-rounded-md tw-shadow-sm tw-outline-none focus:tw-ring-2'
                )}
              >
                <span className="tw-font-inter tw-font-semibold tw-text-xs  ">{t('common:projects.finished')}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="tw-relative">
        <div className="container tw-relative   ">
          <div className="row gy-4 tw-min-h-[605px] md:tw-min-h-[1088px]">
            {filteredProjects?.slice(0, projectsToShow)?.map((project, key) => (
              <div className="col-12 col-md-6 col-xl-4 " key={key}>
                <div className="tw-bg-main-light ">
                  <Link
                    target={project.shouldRedirect ? '_blank' : '_self'}
                    href={project.shouldRedirect ? project.redirectLink! : `${projectPath}/${project.slug}`}
                  >
                    <div className="tw-relative tw-w-full">
  {project.thumbnail && (
    <Image
      // Si la URL empieza con http, la usamos directa. Si no, le sumamos apiUrl.
      src={project.thumbnail.url.startsWith('http') 
        ? project.thumbnail.url 
        : apiUrl + project.thumbnail.url
      }
      height={project.thumbnail.height}
      width={project.thumbnail.width}
      alt="thumbnail"
      className="tw-object-cover tw-aspect-square"
    />
                      )}
                      <div className="tw-absolute tw-left-4 tw-bottom-4 tw-right-4 tw-flex tw-gap-4 tw-items-center tw-justify-between">
                        {project.projectSaleStage && (
                          <label
                            className=" tw-bg-white tw-rounded tw-py-1 tw-px-2 tw-font-semibold tw-font-inter tw-text-sm tw-uppercase "
                            style={{
                              color: project?.projectSaleStage?.labelColor || '#000000',
                              background: project?.projectSaleStage?.labelBackground || '#FFFFFF'
                            }}
                          >
                            {project.projectSaleStage.name}
                          </label>
                        )}
                        { /*  <div className="tw-bg-white tw-rounded tw-py-1 tw-px-2 tw-flex tw-gap-3">
                          <div className="tw-flex tw-gap-1 tw-items-center">
                            <Image src={bedIcon} alt="bed icon" />
                            <span className="tw-font-ibm tw-font-bold tw-text-sm md:tw-text-base tw-text-main-color">
                              {project?.numberRooms}
                            </span>
                          </div>
                          <div className="tw-flex tw-gap-1 tw-items-center">
                            <Image src={showerIcon} alt="shower icon" />
                            <span className="tw-font-ibm tw-font-bold tw-text-sm md:tw-text-base tw-text-main-color">
                              {project?.numberBathrooms}
                            </span>
                          </div>
                          <div className="tw-flex tw-gap-1 tw-items-center">
                            <Image src={areaIcon} alt="area icon" />
                            <span className="tw-font-ibm tw-font-bold tw-text-sm md:tw-text-base tw-text-main-color">
                              {project?.area} {t('common:m2')}
                            </span>
                          </div>
                        </div> */}
                      </div>
                    </div>
                  </Link>

                  <div className="tw-relative ">
                    <div className="row tw-content-center tw-relative  tw-min-h-36">
                      <div className="col-12">
                        <div className="tw-px-4 tw-pt-4">
                          <Link
                            href={project.shouldRedirect ? project.redirectLink! : `${projectPath}/${project.slug}`}
                            target={project.shouldRedirect ? '_blank' : '_self'}
                            className="tw-font-inter tw-font-bold tw-text-black tw-uppercase tw-text-base"
                          >
                            {project.name}
                          </Link>

                          <p className="tw-font-inter tw-text-xs tw-text-black tw-font-normal tw-uppercase">
                            {project?.city?.name}
                          </p>
                        </div>
                      </div>

                      <div className="col-12">
                        <div className="tw-p-4 pe-0">
                          <p className="tw-font-inter tw-text-secondary-dark tw-uppercase tw-font-semibold tw-text-sm">
                            <Image
                              src={checkIcon}
                              width={15}
                              height={15}
                              className="tw-inline-block tw-mr-1 tw-pb-1"
                              alt="projectStatus"
                            />
                            {project.projectStatus?.name}
                            {/* <span className="tw-text-[#D82930] tw-mx-1">|</span>
                            <span
                              className={classNames(
                                'tw-font-semibold',
                                { ' tw-text-black': project.salesProgress < 100 },
                                {
                                  'tw-text-[#D82930]': project.salesProgress >= 100
                                }
                              )}
                            >
                              {project.salesProgress}%
                            </span>
                            <span
                              className={classNames(
                                'tw-ml-1 tw-uppercase',
                                { ' tw-text-black': project.salesProgress < 100 },
                                {
                                  'tw-text-[#D82930]': project.salesProgress >= 100
                                }
                              )}
                            >
                              {t('common:projects.sold')}
                            </span> */}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>{' '}
              </div>
            ))}
          </div>
          {(filteredProjects?.length && filteredProjects?.length > incrementStep && (
            <div className="tw-text-center pt-7">
              {projectsToShow < filteredProjects?.length ? (
                <button
                  onClick={() => setProjectsToShow(projectsToShow + incrementStep)}
                  className="tw-font-ibm tw-font-semibold tw-text-base md:tw-text-lg tw-uppercase tw-text-main-color hover:tw-underline"
                >
                  {t('common:loadMore')}
                </button>
              ) : (
                <button
                  onClick={() => setProjectsToShow(incrementStep)}
                  className="tw-font-ibm tw-font-semibold tw-text-base md:tw-text-lg tw-uppercase tw-text-main-color hover:tw-underline"
                >
                  {t('common:seeLess')}
                </button>
              )}
            </div>
          )) ||
            ''}
        </div>
      </div>
    </section>
  );
};

export default ProjectsGrid;