import moment from 'moment';
import { useEffect, useState } from 'react';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { DataNotificationNotifyContentKey } from '../model/types';

export interface DataNotificationNotifyContentProps {
  paymentMethodName: string;
  type: DataNotificationNotifyContentKey;
  startDate?: string;
  adminEmail?: string;
  urlIp?: string;
  retransmissionInterval?: string;
  retransmissionCount?: string;
  okCheck?: string;
  encryptionStatus?: string;
  openChild: DataNotificationNotifyContentKey | null;
  setOpenChild: (openChild: DataNotificationNotifyContentKey | null) => void;
};
export const DataNotificationNotifyContent = ({
  paymentMethodName,
  type,
  startDate,
  adminEmail,
  urlIp,
  retransmissionInterval,
  retransmissionCount,
  okCheck,
  encryptionStatus,
  openChild,
  setOpenChild
}: DataNotificationNotifyContentProps) => {
  
  const [isOpen, setIsOpen] = useState<boolean>(false);
  
  const openNotifyContent = () => {
    const staus = !isOpen;
    setIsOpen(staus);
    if(!!staus){
      setOpenChild(type);  
    }
    else {
      setOpenChild(null)
    }
  };

  useEffect(() => {
   if(!!openChild && openChild !== type){
    setIsOpen(false);
   }
  }, [openChild]);

  return (
    <>
      <div 
        className="notify-row" 
        onClick={ () => openNotifyContent() }
      >
        <span className="notify-name">{ paymentMethodName }</span>
        <span className={`ic20 arrow-down ${(isOpen)? 'rot-180': ''}`}></span>
      </div>
      <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&
          <div className="notify-content">
            <ul className="notify-detail-list">
              <li className="notify-detail-item">시작일자 : { (!!startDate)? moment(startDate).format('YYYY-MM-DD'): '' }</li>
              <li className="notify-detail-item">관리자 메일 : { adminEmail } </li>
              <li className="notify-detail-item">URL/IP : { urlIp }</li>
              <li className="notify-detail-item">재전송 간격 : { retransmissionInterval }</li>
              <li className="notify-detail-item">재전송 횟수 : { retransmissionCount }</li>
              <li className="notify-detail-item">OK 체크 : { okCheck }</li>
              <li className="notify-detail-item">암호화 전송여부 : { encryptionStatus }</li>
            </ul>
          </div>
        }
      </SlideDown>
    </>
  );
};