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

export interface EscrowSectionProps extends Escrow {
  type: SectionKeys;
  title?: string;
  openChild: SectionKeys | null;
  setOpenChild: (openChild: SectionKeys | null) => void;
};

export const EscrowSection = ({
  type,
  title,
  companyName,
  businessRegistrationNumber,
  escrowStatus,
  address,
  merchantUrl,
  serviceRegistrationNumber,
  openChild,
  setOpenChild
}: EscrowSectionProps) => {

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

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

  useEffect(() => {
    if(!!openChild && openChild !== type){
    setIsOpen(false);
    }
  }, [openChild]);
  
  return (
    <>
      <div className="section">
        <div className="section-title"
          onClick={ () => openSection() }
        >
          { title } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&
          <ul className="kv-list">
            <li className="kv-row">
              <span className="k">상호</span>
              <span className="v">{ companyName }</span>
            </li>
            <li className="kv-row">
              <span className="k">사업자번호</span>
              <span className="v">{ businessRegistrationNumber }</span>
            </li>
            <li className="kv-row">
              <span className="k">NICECROW 가입</span>
              <span className="v">{ escrowStatus }</span>
            </li>
            <li className="kv-row">
              <span className="k">소재지</span>
              <span className="v">{ address }</span>
            </li>
            <li className="kv-row">
              <span className="k">URL</span>
              <span className="v">{ merchantUrl }</span>
            </li>
            <li className="kv-row">
              <span className="k">서비스 등록번호</span>
              <span className="v">{ serviceRegistrationNumber }</span>
            </li>
          </ul>
        }
        </SlideDown> 
      </div>
    </>
  );
};