import moment from 'moment';
import { VatReturnDetailResponse } from '../../model/types';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { NumericFormat } from 'react-number-format';
import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { useState } from 'react';

export interface AmountSectionProps {
  detail: VatReturnDetailResponse;
};

export const AmountSection = ({
  detail
}: AmountSectionProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
  
  const openSection = () => {
    const status = !isOpen;
    setIsOpen(status);
  };
  return (
    <>
      <div className="txn-num-group">
        <div className="txn-amount">
          <div className="value">
            <NumericFormat
              value={ detail.totalAmount } 
              thousandSeparator
              displayType="text"
            ></NumericFormat>
            <span className="unit">원</span>
          </div>
          <button 
            className="chip-btn" 
            type="button"
            onClick={ () => openSection() }
          >
            <span>금액상세</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
          </button>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&  
          <div className="amount-expand">
            <ul className="amount-list">
              <li className="amount-item">
                <span className="label">·&nbsp;&nbsp;공급가액</span>
                <span className="value">
                  <NumericFormat
                    value={ detail.supplyAmount } 
                    thousandSeparator
                    displayType="text"
                    suffix='원'
                  ></NumericFormat>
                </span>
              </li>
              <li className="amount-item">
                <span className="label">·&nbsp;&nbsp;VAT</span>
                <span className="value">
                  <NumericFormat
                    value={ detail.vatAmount } 
                    thousandSeparator
                    displayType="text"
                    suffix='원'
                  ></NumericFormat>
                </span>
              </li>
            </ul>
          </div>
        }
        </SlideDown>
        <div className="txn-mid">
          <span className="value">{ detail.mid }</span>
        </div>
        <div className="txn-mid">
          <span className="value">{ moment(detail.issueDate).format('YYYY.MM.DD') }</span>
        </div>
        <div className="txn-doc">
          <button className="doc-btn" type="button">세금계산서</button>
          <button className="doc-btn" type="button">상세자료</button>
        </div>
      </div>
    </>
  );
};