import React from 'react';
import {
	JDpagination,
	JDpreloader,
	JDbadge,
	autoHypen,
	DEFAULT_PAGINATION_SETTING,
	IusePagination,
	JDselect,
	IUseSelect,
	JDalign,
	JDtypho,
	autoComma,
	JDcard,
	JDbutton,
	JDradioButton
} from '@janda-com/front';
import { lang as LANG } from '../../lang/langFn';
import { DateFormat } from '../../types/enum';
import { IHistory, IManager } from '../../types/interface';
import { SmsType } from '../../types/api';
import moment from 'moment';
import { IRadiosOps } from '@janda-com/front/build/components/radioButton/RadioButton';
import JDtable, { ReactTableDefault, JDcolumn } from '../../atom/table/Table';

export interface IpageInfo {
	currentPage: number;
	totalPage: number;
	rowCount: number;
}

interface Iprops {
	loading: boolean;
	manager: IManager;
	historyItems: IHistory[];
	paginationHook: IusePagination;
	pageInfo: IpageInfo;
	filterHook: IUseSelect<SmsType>;
	onChargeClick: () => void;
	historyTypeRadioHook: {
		options: IRadiosOps[];
		selectedValues: string[];
		onChangeSelect: (values: string[]) => void;
	};
}

const SmsHistory: React.FC<Iprops> = ({
	pageInfo,
	historyTypeRadioHook,
	manager,
	loading,
	historyItems,
	paginationHook,
	filterHook,
	onChargeClick
}) => {
	const { totalPage } = pageInfo;
	const { point } = manager;

	const handleChageClick = () => {
		onChargeClick();
	};

	const TableColumns: JDcolumn<IHistory>[] = [
		{
			Header: LANG('index'),
			accessor: '_id',
			Cell: ({ index }: any) => <span>{index + 1}</span>
		},
		{
			Header: LANG('transmission_time'),
			accessor: 'createdAt',
			Cell: ({ value }: any) => <span>{moment(value).local().format(DateFormat.WITH_TIME)}</span>
		},
		{
			Header: LANG('receiver'),
			accessor: 'receivers',
			Cell: ({ value }: any) => value.map((receiver: string) => <div>{autoHypen(receiver)}</div>)
		},
		// 일단 만들어놓고 사람들 의견 받아보고 해보자
		// {
		// 	Header: LANG('msg_content'),
		// 	accessor: 'isRefunded',
		// 	minWidth: 300,
		// 	Cell: ({ value }: JDTCinfo) => (
		// 		<div className={`JDscrool resvList__memo ${value && value.length > 20 && 'resvList__memo--full'}`}>
		// 			{value}
		// 		</div>
		// 	)
		// },
		{
			Header: LANG('send_type'),
			accessor: 'type',
			minWidth: 200
		},
		{
			Header: LANG('auto_send_case'),
			accessor: 'trigger',
			Cell: ({ value }) => (
				<div className={`JDscrool smsHistory__msg ${value && value.length > 20 && 'smsHistory__msg--full'}`}>
					{value ? value.event : 'N'}
				</div>
			)
		},
		{
			Header: LANG('send_status'),
			accessor: 'ok',
			Cell: ({ value }: any) => (
				<span>
					{value ? <JDbadge thema={'primary'}>{LANG('ok')}</JDbadge> : <JDbadge thema={'error'}>{LANG('fail')}</JDbadge>}
				</span>
			)
		}
	];

	return (
		<div>
			<JDpreloader floating loading={loading} />
			<JDcard mr="no">
				<JDalign
					flex={{
						between: true,
						vCenter: true
					}}
				>
					<JDtypho mb="no" flex size="h6">
						<JDtypho weight={600} mr="normal">
							{LANG('remains')}
						</JDtypho>
						<JDtypho>{autoComma(point.remains)}</JDtypho>
					</JDtypho>
					<JDbutton onClick={handleChageClick} mode="border" thema="primary" label={LANG('go_to_charge')} />
				</JDalign>
			</JDcard>
			<JDcard mr="no">
				<JDalign
					flex={{
						between: true
					}}
				>
					<JDradioButton
						mb="no"
						mode="gather"
						btnProps={{
							mode: 'border'
						}}
						only
						{...historyTypeRadioHook}
					/>
					{/* <JDsearchInput /> */}
					<JDselect mb="no" autoSize mr="no" {...filterHook} />
				</JDalign>
			</JDcard>
			<JDtable
				{...ReactTableDefault}
				data={historyItems}
				columns={TableColumns}
				showPagination={false}
				loading={false}
				align="center"
				minRows={3}
			/>
			<JDpagination pageCount={totalPage} {...DEFAULT_PAGINATION_SETTING} {...paginationHook} />
		</div>
	);
};

export default SmsHistory;
