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";

const { Title, Text, Paragraph } = Typography;

function Detail() {
	const navigate = useNavigate();
	const { GRI_SN } = useParams();
	const { feedbackStore } = 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(30008, 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;

	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}>
					<Form labelCol={{ span: 5 }}>
						<Divider orientation="left">地接社反馈</Divider>
						<Form.Item>
							<Input.TextArea></Input.TextArea>
						</Form.Item>
						<Divider orientation="left">上传照片</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>
				</Col>
				<Col span={4}></Col>
			</Row>
		</Space>
	);
}

export default observer(Detail);