import moment from 'moment';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterSelect } from '@/shared/ui/filter/select';
import { ReferenceRequestSuccess } from './reference-request-success';
import { ReferenceRequestFail } from './reference-request-fail';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { getVatReturnTaxBtnGroups } from '../model/contant';
import { VatReturnPayTax, VatReturnReferenceRequestParams, VatReturnReferenceRequestResponse } from '../model/types';
import { useStore } from '@/shared/model/store';
import { useVatReturnReferenceRequestMutation } from '../api/use-vat-return-reference-request-mutation';

export const ReferenceWrap = () => {
  const { t } = useTranslation();
  const midOptions = useStore.getState().UserStore.selectOptionsMids;
  const emailOptions = useStore.getState().UserStore.selectOptionsEmails;
  const userMid = useStore.getState().UserStore.mid;
  const userEmail = useStore.getState().UserStore.email;
  
  const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
  const [failPageOn, setFailPageOn] = useState<boolean>(false);
  
  const [mid, setMid] = useState<string>(userMid);
  const [startDate, setStartDate] = useState<string>(moment().format('YYYYMMDD'));
  const [endDate, setEndDate] = useState<string>(moment().format('YYYYMMDD'));
  const [payTax, setPayTax] = useState<VatReturnPayTax>(VatReturnPayTax.TAX);
  const [email, setEmail] = useState<string>(userEmail);
  const [errorMsg, setErrorMsg] = useState<string>('');

  const { mutateAsync: vatReturnReferenceRequest } = useVatReturnReferenceRequestMutation();

  const onClickToResquest = () => {
    let params: VatReturnReferenceRequestParams = {
      mid: mid,
      startDate: startDate,
      endDate: endDate,
      taxType: payTax,
      email: email || userEmail
    }
    vatReturnReferenceRequest(params).then((rs: VatReturnReferenceRequestResponse) => {
      setSuccessPageOn(true);
    }).catch((error) => {
      setErrorMsg(t('vatReturn.keyInMerchantError'));
      setFailPageOn(true);
    }); 
  };

  return (
    <>
      <div className="option-list no-padding pt-30">
        <FilterSelect
          title={t('merchant.title')}
          selectValue={ mid }
          selectSetter={ setMid }
          selectOptions={ midOptions }
        ></FilterSelect>
        <FilterButtonGroups
          title={t('vatReturn.taxExemptionType')}
          activeValue={ payTax }
          btnGroups={ getVatReturnTaxBtnGroups(t) }
          setter={ setPayTax }
          addClassName='horizon'
          maxBtn={ 2 }
        ></FilterButtonGroups>
        <FilterCalendar
          title={t('vatReturn.transactionPeriod')}
          startDate={ startDate }
          endDate={ endDate }
          setStartDate={ setStartDate }
          setEndDate={ setEndDate }
        ></FilterCalendar>
        <FilterSelect
          title={t('vatReturn.receivingEmail')}
          selectValue={ email }
          selectSetter={ setEmail }
          selectOptions={ emailOptions }
        ></FilterSelect>
      </div>
      <div className="apply-row">
        <button
          className="btn-50 btn-blue flex-1"
          onClick={ onClickToResquest }
        >{t('vatReturn.requestData')}</button>
      </div>
      <ReferenceRequestSuccess
        pageOn={ successPageOn }
        setPageOn={ setSuccessPageOn }
        email={ email || userEmail }
        startDate={ startDate }
      ></ReferenceRequestSuccess>
      <ReferenceRequestFail
        pageOn={ failPageOn }
        setPageOn={ setFailPageOn }
        errorMsg={ errorMsg }
      ></ReferenceRequestFail>
    </>
  )
};