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

export interface NotifyRowProps {
  paymentMethodName: string;
  type: NotifyRowKeys;
  startDate?: string;
  adminEmail?: string;
  urlIp?: string;
  retransmissionInterval?: string;
  retransmissionCount?: string;
  okCheck?: string;
  encryptionStatus?: string;
  openChild: NotifyRowKeys | null;
  setOpenChild: (openChild: NotifyRowKeys | null) => void;
};

export const NotifyRow = ({
  paymentMethodName,
  type,
  startDate,
  adminEmail,
  urlIp,
  retransmissionInterval,
  retransmissionCount,
  okCheck,
  encryptionStatus,
  openChild,
  setOpenChild
}: NotifyRowProps) => {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState<boolean>(false);
  
  const openNotifyRow = () => {
    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={ () => openNotifyRow() }
        >
          <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">{t('payment.startDate')} : { (!!startDate)? moment(startDate).format('YYYY-MM-DD'): '' }</li>
                <li className="notify-detail-item">{t('payment.adminEmail')} : { adminEmail } </li>
                <li className="notify-detail-item">{t('payment.urlIp')} : { urlIp }</li>
                <li className="notify-detail-item">{t('payment.retransmissionInterval')} : { retransmissionInterval }</li>
                <li className="notify-detail-item">{t('payment.retransmissionCount')} : { retransmissionCount }</li>
                <li className="notify-detail-item">{t('payment.okCheck')} : { okCheck }</li>
                <li className="notify-detail-item">{t('payment.encryptionStatus')} : { encryptionStatus }</li>
              </ul>
            </div>
          }
        </SlideDown>
      </>
    );
};