import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import moment from "moment";
import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Modal, Upload, Input } from "antd";
import { useStore } from "../../stores/StoreContext.js";
import { PlusOutlined } from "@ant-design/icons";
const { Title, Text, Paragraph } = Typography;
import * as config from "@/config";

function Detail() {
	const navigate = useNavigate();
	const { GRI_SN } = useParams();
	const { feedbackStore, authStore } = useStore();
	const { feedbackRate, feedbackReview } = feedbackStore;
	const [value, setValue] = useState(3);
	const desc = ["none", "Unacceptable", "Poor", "Fair", "Very Good", "Excellent"];

	useEffect(() => {
		console.info("Detail.useEffect: " + GRI_SN);
		feedbackStore.getFeedbackDetail(authStore.login.travelAgencyId, GRI_SN);
	}, [GRI_SN]);

	const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : 0;
	const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : 0;
	const HWO_Car = feedbackRate && feedbackRate.HWO_Car ? feedbackRate.HWO_Car : 0;
	const HWO_Hotel = feedbackRate && feedbackRate.HWO_Hotel ? feedbackRate.HWO_Hotel : 0;
	const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : 0;
	const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : "";
	const PhotoPermission = feedbackRate && feedbackRate.PhotoPermission && feedbackRate.PhotoPermission == "YES" ? true : false;
	const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : "None";

	const [fileList, setFileList] = useState([
		{
			uid: "-1",
			name: "image.png",
			status: "done",
			url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
		},
		{
			uid: "-2",
			name: "image.png",
			status: "done",
			url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
		},
		{
			uid: "-3",
			name: "image.png",
			status: "done",
			url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
		},
		{
			uid: "-4",
			name: "image.png",
			status: "done",
			url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
		},
	]);

	const handleChange = info => {
		console.log(info);
		// ({ fileList: newFileList }) => setFileList(newFileList)
		let newFileList = [...info.fileList];
		newFileList = newFileList.map(file => {
			if (file.response) {
				file.url = file.response;
			}
			return file;
		});
		setFileList(newFileList);
	};

	const handRemove = info => {
		console.log(info);
		return true;
	};

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Row gutter={16}>
				<Col span={20}>
					<Title level={4}>Post Survey - Albee221228017</Title>
				</Col>
				<Col span={4}>
					<Button type="link" onClick={() => navigate("/feedback")}>
						Back
					</Button>
				</Col>
			</Row>
			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
					<Form labelCol={{ span: 5 }}>
						<Divider orientation="left">How satisfied were you with your general experience?</Divider>
						<Form.Item label="Tour Guide Service">
							<Space>
								<Rate disabled value={HWO_Guide} />
								<span className="ant-rate-text">{desc[HWO_Guide]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Driver's Attitude">
							<Space>
								<Rate disabled value={HWO_Driver} />
								<span className="ant-rate-text">{desc[HWO_Driver]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Comfort of the Car/Van">
							<Space>
								<Rate disabled value={HWO_Car} />
								<span className="ant-rate-text">{desc[HWO_Car]}</span>
							</Space>
						</Form.Item>

						<Form.Item label="Hotel">
							<Space>
								<Rate disabled value={HWO_Hotel} />
								<span className="ant-rate-text">{desc[HWO_Hotel]}</span>
							</Space>
						</Form.Item>
						<Form.Item label="Activities' Arrangements">
							<Space>
								<Rate disabled value={HWO_Activity} />
								<span className="ant-rate-text">{desc[HWO_Activity]}</span>
							</Space>
						</Form.Item>
						<Divider orientation="left">Would you like to give us permission to use the photos taken by the tour guide(s) during your trip which contain your portrait?</Divider>
						<Paragraph>
							{PhotoPermission ? (
								<>
									<Radio checked>Yes</Radio>
									<Radio disabled={true}>No</Radio>
								</>
							) : (
								<>
									<Radio disabled={true}>Yes</Radio>
									<Radio checked>No</Radio>
								</>
							)}
						</Paragraph>
						<Divider orientation="left">Other thoughts you want to share with us:</Divider>
						<Text>{OtherThoughts}</Text>
					</Form>
				</Col>
				<Col span={4}></Col>
			</Row>

			<Row gutter={16}>
				<Col span={20}>
					<Title level={4}>站外好评</Title>
				</Col>
				<Col span={4}></Col>
			</Row>
			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
					<Text>{ECI_Content}</Text>
				</Col>
				<Col span={4}></Col>
			</Row>

			<Row gutter={16}>
				<Col span={20}>
					<Title level={4}>地接社的反馈</Title>
				</Col>
				<Col span={4}></Col>
			</Row>

			<Row gutter={16}>
				<Col span={4}></Col>
				<Col span={18}>
					<Form labelCol={{ span: 5 }}>
						<Divider orientation="left">上传照片</Divider>
						<Form.Item>
							<Upload
								name="ghhfile"
								accept="image/*"
								multiple={true}
								action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${authStore.login.travelAgencyId}`}
								fileList={fileList}
								listType="picture-card"
								onChange={handleChange}
								onRemove={handRemove}>
								<div>
									<PlusOutlined />
									<div style={{ marginTop: 8 }}>Click to Upload</div>
								</div>
							</Upload>
						</Form.Item>

						<Divider orientation="left">地接社反馈信息</Divider>
						<Form.Item>
							<Input.TextArea rows={6}></Input.TextArea>
						</Form.Item>
						<Form.Item>
							<Button type="primary" onClick={() => console.info("submit")}>
								Submit
							</Button>
						</Form.Item>
					</Form>
				</Col>
				<Col span={4}></Col>
			</Row>
		</Space>
	);
}

export default observer(Detail);