import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { CardApplications, SectionKeys } from '../../model/types';
import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { useEffect, useState } from 'react';

export interface CardSectionProps {
  type: SectionKeys;
  title?: string;
  cardApplications?: Array<CardApplications>
  openChild: SectionKeys | null;
  setOpenChild: (openChild: SectionKeys | null) => void;
};

export const CardSection = ({
  type,
  title,
  cardApplications,
  openChild,
  setOpenChild
}: CardSectionProps) => {

  const [isOpen, setIsOpen] = useState<boolean>(false);

  const opeSection = () => {
    const staus = !isOpen;
    setIsOpen(staus);
    if(!!staus){
      setOpenChild(type);  
    }
    else {
      setOpenChild(null)
    }
  };

  useEffect(() => {
    if(!!openChild && openChild !== type){
    setIsOpen(false);
    }
  }, [openChild]);
  
  return (
    <>
      <div className="section">
        <div className="section-title"
          onClick={ () => opeSection() }
        >
          { title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&
          <ul className="kv-list">
            { cardApplications?.map((value, index) => (
                <li className="kv-row">
                  <span className="k">{ value.cardCompanyName }</span>
                  <span className="v">{ `${value.partnerServiceName}(${value.statusName})` }</span>
                </li>
              ))
            }
          </ul>
        }
        </SlideDown> 
      </div>
    </>
  );
};