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

export interface ManagerSectionProps {
  type: SectionKeys;
  title?: string;
  manager?: string;
  managerTelephone?: string;
  managetEmail?: string;
  openChild: SectionKeys | null;
  setOpenChild: (openChild: SectionKeys | null) => void;
};

export const ManagerSection = ({
  type,
  title,
  manager,
  managerTelephone,
  managetEmail,
  openChild,
  setOpenChild
}: ManagerSectionProps) => {

  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">
            <li className="kv-row">
              <span className="k">{ manager }</span>
              <span className="v"></span>
            </li>
            <li className="kv-row">
              <span className="k">{ managerTelephone }</span>
              <span className="v"></span>
            </li>
            <li className="kv-row">
              <span className="k">{ managetEmail }</span>
              <span className="v"></span>
            </li>
          </ul>
        }
        </SlideDown> 
      </div>
    </>
  );
};