import moment from 'moment';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
import { 
	TransactionCategory, 
	CashReceiptPurposeType, 
	CashReceiptProcessResult, 
	ListItemProps, 
	CashReceiptListParams, 
	CashReceiptTransactionType, 
	CashReceiptSearchNumberType, 
	CashReceiptSummaryParams, 
	CashReceiptListResponse, 
	CashReceiptSummaryResponse, 
	DetailData,
	CashReceiptExcelDownloadParams,
	CashReceiptExcelDownloadResponse,
	CashReceiptDateType
} from '@/entities/transaction/model/types';
import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { CashReceiptFilter } from '@/entities/transaction/ui/filter/cash-receipt-filter';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types';
import {
	useSetOnBack,
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { getCashReceiptTransactionTypeBtnGroup } from '@/entities/transaction/model/contant';
import { useDetailOnStore, useFilterlOnStore, useStore } from '@/shared/model/store';
import { useCashReceiptSummaryMutation } from '@/entities/transaction/api/use-cash-receipt-summary-mutation';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { CashReceiptDetail } from '@/entities/transaction/ui/detail/cash-receit-detail';
import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib';
import { useCashReceiptExcelDownloadMutation } from '@/entities/transaction/api/use-cash-receipt-excel-download-mutation';

/* 현금영수증 32 */
const menuId = 32;
const defaultParams = {
	startDate: moment().format('YYYYMMDD'),
	endDate: moment().format('YYYYMMDD'),
	purposeType: CashReceiptPurposeType.ALL,
	transactionType: CashReceiptTransactionType.ALL,
	processResult: CashReceiptProcessResult.ALL,
	searchNumberType: CashReceiptSearchNumberType.APPROVAL_NUMBER,
	searchNumber: '',
};
export const CashReceiptListPage = () => {
	const { navigate } = useNavigate();
	const { t, i18n } = useTranslation();
	const userMid = useStore.getState().UserStore.mid;

	const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
	const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
	const [listItems, setListItems] = useState<Array<ListItemProps>>([]);
	const { filterOn, setFilterOn } = useFilterlOnStore();
	const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
	const [mid, setMid] = useState<string>(userMid);
	const [startDate, setStartDate] = useState<string>(moment().format('YYYYMMDD'));
	const [endDate, setEndDate] = useState<string>(moment().format('YYYYMMDD'));
	const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>(CashReceiptPurposeType.ALL);
	const [transactionType, setTransactionType] = useState<CashReceiptTransactionType>(CashReceiptTransactionType.ALL);
	const [processResult, setProcessResult] = useState<CashReceiptProcessResult>(CashReceiptProcessResult.ALL);
	const [searchNumberType, setSearchNumberType] = useState<CashReceiptSearchNumberType>(CashReceiptSearchNumberType.APPROVAL_NUMBER);
	const [searchNumber, setSearchNumber] = useState<string>('');
	const [approvalCount, setApprovalCount] = useState<number>(0);
	const [approvalAmount, setApprovalAmount] = useState<number>(0);
	const [cancelCount, setCancelCount] = useState<number>(0);
	const [cancelAmount, setCancelAmount] = useState<number>(0);
	const [totalCount, setTotalCount] = useState<number>(0);

	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

	const { detailOn, setDetailOn } = useDetailOnStore();
  const [detailTid, setDetailTid] = useState<string>('');
  const [detailServiceCode, setDetailServiceCode] = useState<string>('');

	const [filterUsed, setFilterUsed] = useState<boolean>(false);
	
	useSetHeaderTitle(t('cashReceipt.title'));
	useSetHeaderType(HeaderType.LeftArrow);
	useSetOnBack(() => {
		navigate(PATHS.home);
	});
  useSetFooterMode(false);

	const { mutateAsync: cashReceiptList } = useCashReceiptListMutation();
	const { mutateAsync: cashReceiptSummary } = useCashReceiptSummaryMutation();
	const { mutateAsync: cashReceiptExcelDownload } = useCashReceiptExcelDownloadMutation();

	const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
      if(entry.isIntersecting){
        if(onActionIntersect && !!pageParam.cursor){
					setOnActionIntersect(false);
          callList('page');
        } 
      }
    });
  };

	const { setTarget } = useIntersectionObserver({ 
    threshold: 1, 
    onIntersect 
  });

	const callList = (type?: string) => {
		setOnActionIntersect(false);
		let listSummaryParams: CashReceiptSummaryParams = {
			mid: mid,
			startDate: startDate,
			endDate: endDate,
			purposeType: purposeType,
			transactionType: transactionType,
			processResult: processResult,
			searchNumberType: searchNumberType,
			searchNumber: searchNumber,
			page: pageParam
		};
		let listParams: CashReceiptListParams = {
			...listSummaryParams,
			page: {
				...pageParam,
				...{ sortType: sortType }
			}
		};
		if(type !== 'page' && listParams.page){
      listParams.page.cursor = null;
    }
		
		cashReceiptList(listParams).then((rs: CashReceiptListResponse) => {
			if(type === 'page'){
        setListItems([
          ...listItems,
          ...rs.content
        ]);
      }
      else{
        setListItems(rs.content);
      }
			if(rs.hasNext 
				&& rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      ){
        setPageParam({
          ...pageParam,
          ...{ cursor: rs.nextCursor }
        });
      }
      else{
        setPageParam({
          ...pageParam,
          ...{ cursor: null }
        });
      }
			setOnActionIntersect(
        !!rs.hasNext 
				&& rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
		}).catch((e: any) => {
      if(e.response?.data?.error?.message){
        snackBar(e.response?.data?.error?.message);
        return;
      }
    });
		
		cashReceiptSummary(listSummaryParams).then((rs: CashReceiptSummaryResponse) => {
			setApprovalCount(rs.approvalCount);
			setApprovalAmount(rs.approvalAmount);
			setCancelCount(rs.cancelCount);
			setCancelAmount(rs.cancelAmount);
			setTotalCount(rs.totalCount);
		}).catch((e: any) => {
      if(e.response?.data?.error?.message){
        snackBar(e.response?.data?.error?.message);
        return;
      }
    });

	}

	const onRequestDownloadExcel = (
		selectedMode: DownloadSelectedMode,
		userEmail?: string
	) => {
    if(selectedMode === DownloadSelectedMode.EMAIL
			&& !!userEmail
		){
			let params: CashReceiptExcelDownloadParams = {
				email: userEmail,
				mid: mid,
				startDate: startDate,
				endDate: endDate,
				dateType: CashReceiptDateType.ISSUE_DATE,
				purposeType: purposeType,
				transactionType: transactionType,
				processResult: processResult
			};

			cashReceiptExcelDownload(params).then((rs: CashReceiptExcelDownloadResponse) => {
				console.log(rs);
				snackBar('이메일로 엑셀파일 요청이 완료되었습니다.');
			}).catch((e: any) => {
				if(e.response?.data?.error?.message){
					snackBar(e.response?.data?.error?.message);
					return;
				}
			});
		}
  };


	const setDetailData = (detailData: DetailData) => {
		setDetailOn(detailData.detailOn);
		setDetailTid(detailData.tid);
		if(detailData?.serviceCode){
			setDetailServiceCode(detailData?.serviceCode);
		}
	};	

	const onClickToOpenFilter = () => {
		setFilterOn(!filterOn);
	};
	const onClickToOpenDownloadBottomSheet = () => {
		if(checkGrant(menuId, 'D')){
			setDownloadBottomSheetOn(true);
		}
		else{
			showAlert(t('common.nopermission'));
		}
	};
	const onClickToSort = (sort: SortTypeKeys) => {
		setSortType(sort);
	};

	const onClickToTransactionType = (val: CashReceiptTransactionType) => {
		setTransactionType(val);
	};
	const onClickToNavigate = () => {
		if(checkGrant(menuId, 'W')){
    	navigate(PATHS.transaction.cashReceipt.handWrittenIssuance);
		}
		else{
			showAlert(t('common.nopermission'));
		}
  };

	const checkUsedFilter = () => {
    let rs: boolean = true;
    if(startDate === defaultParams.startDate
      && endDate === defaultParams.endDate
      && purposeType === defaultParams.purposeType
      && transactionType === defaultParams.transactionType
      && processResult === defaultParams.processResult
      && searchNumberType === defaultParams.searchNumberType
      && searchNumber === defaultParams.searchNumber
    ){
      rs =  false;
    }
    setFilterUsed(rs);
	};

	useEffect(() => {
    callList();
		checkUsedFilter();
  }, [
    mid, startDate, endDate, sortType,
    purposeType, transactionType, processResult,
    searchNumberType, searchNumber
  ]);

	return (
		<>
			<main>
				<div className="tab-content pb-86">
					<div className="tab-pane sub active">
						<div className="summary-section">
							<div className="credit-controls">
								<div>
									<input
										type="text"
										className="credit-period"
										value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') }
										readOnly={ true }
									/>
									<button className="filter-btn">
										<img
											src={ IMAGE_ROOT + '/ico_setting.svg' }
											alt={ t('transaction.searchOptions') }
											onClick={ onClickToOpenFilter }
										/>
										{ filterUsed &&
                      <span className="notification-badge2"></span>
                    }
									</button>
								</div>
								<button className="download-btn">
									<img
										src={IMAGE_ROOT + '/ico_download.svg'}
										alt={ t('transaction.download') }
										onClick={ onClickToOpenDownloadBottomSheet }
									/>
								</button>
							</div>
							<div className="credit-summary">
								<div className="row">
									<span className="label">{ t('cashReceipt.approval') }</span>
									<strong className="amount22">
										{t('home.money', { value: new Intl.NumberFormat('en-US').format(approvalAmount || 0) })}
									</strong>
									<span className="count">
										({t('home.count', { value: new Intl.NumberFormat('en-US').format(approvalCount || 0) })})
									</span>
								</div>
								<div className="row">
									<span className="label">{ t('common.cancel') }</span>
									<strong className="amount19">
										{t('home.money', { value: new Intl.NumberFormat('en-US').format(cancelAmount || 0) })}
									</strong>
									<span className="count">
										({t('home.count', { value: new Intl.NumberFormat('en-US').format(cancelCount || 0) })})
									</span>
								</div>
							</div>
						</div>

						<div className="filter-section">
							<SortTypeBox
								sortType={ sortType }
								onClickToSort={ onClickToSort }
							></SortTypeBox>
							<div className="excrow">
								<div className="full-menu-keywords no-padding">
								{
									getCashReceiptTransactionTypeBtnGroup(t).map((value: any, index: number) => (
										<span
											key={`key-service-code=${index}`}
											className={`keyword-tag ${(transactionType === value.value) ? 'active' : ''}`}
											onClick={() => onClickToTransactionType(value.value)}
										>{value.name}</span>
									))
								}
								</div>
							</div>
						</div>
						<CashReceiptList
							listItems={ listItems }
							transactionCategory={ TransactionCategory.CashReceipt }
							setDetailData={ setDetailData }
							onClickToOpenFilter={ onClickToOpenFilter }
              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
						></CashReceiptList>
						<div ref={ setTarget }></div>
					</div>
				</div>
			</main>
			<div className="apply-row">
				<button
					className="btn-50 btn-blue flex-1"
					onClick={ () => onClickToNavigate() }
				>{ t('transaction.list.manualIssuance') }</button>
			</div>
			<CashReceiptFilter
				filterOn={ filterOn }
				setFilterOn={ setFilterOn }
				mid={ mid }
				startDate={ startDate }
				endDate={ endDate }
				purposeType={ purposeType }
				transactionType={ transactionType }
				processResult={ processResult }
				searchNumberType={ searchNumberType }
				searchNumber={ searchNumber }
				setMid={ setMid }
				setStartDate={ setStartDate }
				setEndDate={ setEndDate }
				setPurposeType={ setPurposeType }
				setTransactionType={ setTransactionType }
				setProcessResult={ setProcessResult }
				setSearchNumberType={ setSearchNumberType }
				setSearchNumber={ setSearchNumber }
			></CashReceiptFilter>
			<CashReceiptDetail
				detailOn={ detailOn }
				setDetailOn={ setDetailOn }
				tid={ detailTid }
			></CashReceiptDetail>
			{ !!downloadBottomSheetOn &&
				<DownloadBottomSheet
					bottomSheetOn={ downloadBottomSheetOn }
					setBottomSheetOn={ setDownloadBottomSheetOn }
					imageMode={ false }
					emailMode={ true }
					sendRequest={ onRequestDownloadExcel }
				></DownloadBottomSheet>
			}
		</>
	);
};