import { NavLink } from "react-router-dom";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, App } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";

const { Title } = Typography;
const feedbackListColumns = [
	{
		title: "Ref.No",
		dataIndex: "EOI_Group_Name",
		render: (text, record) => <NavLink to={`/feedback/${record.EOI_GRI_SN}`}>{text}</NavLink>,
	},
	{
		title: "Arrival Date",
		dataIndex: "EOI_Date",
		render: (text, record) => text,
		sorter: (a, b) => b.EOI_Date - a.EOI_Date,
	},
	{
		title: "Cities",
		key: "City",
		dataIndex: "City",
	},
	{
		title: "Guides",
		dataIndex: "GriName",
	},
	{
		title: "Post Survey",
		dataIndex: "Average",
		sorter: (a, b) => b.Average - a.Average,
	},
	{
		title: "External Reviews",
		dataIndex: "TAGood",
	},
];

function Index() {
	const { notification } = App.useApp();
	const { feedbackStore, authStore } = useStore();
	const { feedbackList, search_date_start, search_date_end } = feedbackStore;
	const [referenceNo, onNumberChange] = useState("");
	const showTotal = total => `Total ${feedbackList.length} items`;

	useEffect(() => {
		feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59")
		.catch(ex => {
			// notification.error({
			//   message: `Error`,
			//   description: ex.message,
			//   placement: 'top',
			//   duration: 4,
			// });
			console.log(ex.message);
		  });
	}, []);

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Title level={3}></Title>

			<Row gutter={16}>
				<Col md={24} lg={6} xxl={4}>
					<Input
						placeholder="Reference Number"
						onChange={e => {
							onNumberChange(e.target.value);
						}}
					/>
				</Col>
				<Col md={24} lg={8} xxl={6}>
					<Space direction="horizontal">
						Arrival Date
						<DatePicker.RangePicker
							format={config.DATE_FORMAT}
							allowClear={false}
							style={{ width: "100%" }}
							value={[search_date_start, search_date_end]}
							presets={config.DATE_PRESETS}
							onChange={feedbackStore.onDateRangeChange}
						/>
					</Space>
				</Col>
				<Col md={24} lg={4} xxl={4}>
					<Button
						type="primary"
						loading={feedbackStore.loading}
						onClick={() => feedbackStore.searchFeedbackList(authStore.login.travelAgencyId, referenceNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT) + " 23:59")}>
						Search
					</Button>
				</Col>
			</Row>
			<Title level={3}></Title>
			<Row>
				<Col md={24} lg={24} xxl={12}>
					<Table bordered={true} columns={feedbackListColumns} dataSource={toJS(feedbackList)} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
				</Col>
				<Col md={24} lg={24} xxl={12}></Col>
			</Row>
		</Space>
	);
}

export default observer(Index);