import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { AllTransactionAllCancel } from '@/entities/transaction/ui/all-transaction-all-cancel'
import { AllTransactionPartCancel } from '@/entities/transaction/ui/all-transaction-part-cancel'
import { useAllTransactioCancleMutation } from '@/entities/transaction/api/use-all-transaction-cancel-mutation';
import { HeaderType } from '@/entities/common/model/types';
import { 
  AllTransactionCancelParams,
  AllTransactionCancelResponse,
  CancelTabKeys
} from '@/entities/transaction/model/types';
import { 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';

export const AllTransactionCancelPage = () => {
  const location = useLocation();
  
  useSetHeaderTitle('거래 취소');
  useSetHeaderType(HeaderType.RightClose);
  useSetFooterMode(false);

  // all or part
  const [tabAction, setTabAction] = useState<CancelTabKeys>(CancelTabKeys.All);

  const { mutateAsync: transactionCancel } = useAllTransactioCancleMutation();

  const callTransactionCancel = () => {
    let transactionCancelParams: AllTransactionCancelParams = {
      tid: location?.state.tid,
      cancelAmount: 0,
      cancelPassword: "string",
      bankCode: "string",
      accountNo: "string",
      accountHolder: "string",
      supplyAmount: 0,
      goodsVatAmount: 0,
      taxFreeAmount: 0,
      serviceAmount: 0
    };
    transactionCancel(transactionCancelParams).then((rs: AllTransactionCancelResponse) => {
      console.log(rs);
    });
  };
  useEffect(() => {
    
  }, []);

  const onClickToChangeTab = (tab: CancelTabKeys) => {
    setTabAction(tab);
  };
  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list-nopadding">
              <div className="subTab">
                <button 
                  className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
                  onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
                >전체 취소</button>
                <button 
                  className={ `subtab-btn ${(tabAction === CancelTabKeys.Part)? 'active': ''}` }
                  onClick={ () => onClickToChangeTab(CancelTabKeys.Part) }
                >부분 취소</button>
              </div>
              <div className="cancel-list">
                <div className="amount-info">
                  <ul className="amount-list">
                    <li className="amount-item">
                      <span className="label">·&nbsp;&nbsp;총 잔액</span>
                      <span className="value">500,000,000</span>
                    </li>
                    <li className="amount-item">
                      <span className="label">·&nbsp;&nbsp;총 취소금액</span>
                      <span className="value">500,000,000</span>
                    </li>
                  </ul>
                </div>
                { (tabAction === CancelTabKeys.All) &&
                  <AllTransactionAllCancel></AllTransactionAllCancel>
                }
                { (tabAction === CancelTabKeys.Part) &&
                  <AllTransactionPartCancel></AllTransactionPartCancel>
                }
              </div>
            </div>

            <div className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => callTransactionCancel() }
              >신청</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};
