import classNames from 'classnames';
import Image from 'next/image';
import React, { useEffect, useState } from 'react';

interface CommonAreasProps {
  title?: string;
  preTitle?: string;
  darkColor?: string;
  lightColor?: string;

  image?: any;
  commonAreas: any[];
  trans: any;
}

const CommonAreas: React.FC<CommonAreasProps> = (props) => {
  const {
    trans,
    title = '',
    preTitle = '',
    darkColor = '',
    lightColor = '',

    image,
    commonAreas
  } = props;


  const [visibleItems, setVisibleItems] = useState(5);
  const [collapsedActive, setCollapsedActive] = useState(0);
  const [activeImage, setActiveimage] = useState<any>(null)
  const handleLoadMore = () => {
    setVisibleItems((prev) => prev + 5); // Cargar 5 elementos más al hacer clic
  };
  useEffect(() => {
    if (collapsedActive && commonAreas && commonAreas?.length && commonAreas[collapsedActive - 1]?.image && commonAreas[collapsedActive - 1]?.image?.url) {
      setActiveimage(commonAreas[collapsedActive - 1]?.image)
    } else {
      setActiveimage(null)

    }
  }, [collapsedActive])

  return (
    <section id="commonFacilities" className="wrapper tw-bg-cover tw-bg-no-repeat" style={{ background: darkColor }}>
      <div className="container py-5 py-md-10">
        <div className="row gx-lg-8 tw-gap-y-4 md:tw-gap-y-8">
          <div className="col-12 mt-lg-2">
            <p className="mb-2 base-pretitle tw-text-center" style={{ color: lightColor }}>
              {preTitle}
            </p>
            <h2 className="base-title tw-text-center" style={{ color: lightColor }}>
              {title}
            </h2>
          </div>
          {/*-- /column -*/}
          <div className="col-12 col-md-6">
            {(activeImage && activeImage?.url && (
              <Image
                src={activeImage?.url}
                width={activeImage?.width}
                height={activeImage?.height}
                alt=""
                className="tw-w-full  tw-h-auto tw-max-h-full tw-object-cover"
              />
            )) ||
              <div className='tw-w-full tw-aspect-[736/357] tw-h-full' />}
            {/*(image && image?.url && (
              <Image
                src={image?.url}
                width={image?.width}
                height={image?.height}
                alt="lifestyle"
                className="tw-w-full  tw-h-auto"
              />
            )) ||
              '' */}
          </div>
          <div className="col-12 col-md-6">
            <div className="accordion accordion-wrapper" id="accordionCommonAreas">
              {commonAreas?.slice(0, visibleItems).map((area, key) => (
                <div key={key} className="card accordion-item mb-0 tw-bg-transparent">
                  <div className="tw-py-3 tw-border-b tw-border-light-gray" id={'heading' + key}>
                    <button
                      className="accordion-button tw-flex tw-gap-4 tw-w-full hover:tw-opacity-75"
                      data-bs-toggle="collapse"
                      data-bs-target={'#collapse' + key}
                      aria-expanded="false"
                      aria-controls={'collapse' + key}
                      onClick={() => setCollapsedActive(collapsedActive === key + 1 ? 0 : key + 1)}
                    >
                      <span
                        className="tw-w-7 tw-h-7 tw-rounded-full tw-font-ibm tw-font-bold tw-text-sm tw-justify-center tw-items-center tw-text-main-dark tw-flex"
                        style={{ backgroundColor: lightColor }}
                      >
                        {key + 1}
                      </span>
                      <p
                        className="tw-font-inter tw-font-medium tw-text-white tw-text-sm md:tw-text-base"
                        style={{ color: lightColor }}
                      >
                        {area?.title}
                      </p>
                      <p
                        className="ms-auto tw-font-inter tw-font-medium tw-text-white tw-text-sm md:tw-text-base"
                        style={{ color: lightColor }}
                      >
                        {' '}
                        {collapsedActive === key + 1 ? '-' : '+'}
                      </p>
                    </button>
                  </div>
                  <div
                    id={'collapse' + key}
                    className={classNames('accordion-collapse collapse')}
                    aria-labelledby={'heading' + key}
                    data-bs-parent="#accordionCommonAreas"
                  >
                    <div className="tw-py-4">
                      <p
                        className="tw-text-sm md:tw-text-base tw-text-white tw-font-inter tw-font-normal"
                        style={{ color: lightColor }}
                      >
                        {area?.text}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            {visibleItems < commonAreas?.length && (
              <div className="tw-mt-4 tw-text-center">
                <button
                  onClick={handleLoadMore}
                  style={{ color: lightColor }}
                  className="hover:tw-opacity-75 tw-font-inter tw-text-sm tw-uppercase tw-underline tw-font-bold "
                >
                  {trans('common:loadMore')}
                </button>
              </div>
            )}
          </div>
        </div>
        {/*-- /.row -*/}
      </div>
      {/*-- /.container -*/}
    </section>
  );
};

export default CommonAreas;