import { useParams, useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { Row, Col, Space, Button, Divider, Form, Typography, Rate, Radio, Upload, Input, App, Card } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import * as config from '@/config';
import useAuthStore from '@/stores/Auth';
import { getFeedbackDetail, getCustomerFeedbackDetail, getFeedbackImages, getFeedbackInfo, removeFeedbackImages, postFeedbackInfo } from '@/stores/Feedback';

const { Title, Text, Paragraph } = Typography;

function Detail() {
  const navigate = useNavigate();
  const { GRI_SN, RefNo, CII_SN } = useParams();
  const [travelAgencyId, token] = useAuthStore((state) => [state.loginUser.travelAgencyId, state.loginUser.token]);
  const desc = ['none', 'Unacceptable', 'Poor', 'Fair', 'Very Good', 'Excellent'];
  const { notification } = App.useApp();
  const [form] = Form.useForm();

  const [feedbackRate, setFeedbackRate] = useState({});
  const [feedbackReview, setFeedbackReview] = useState({});
  const [feedbackImages, setFeedbackImages] = useState([]);
  const [feedbackInfo, setFeedbackInfo] = useState({});

  useEffect(() => {
    console.info('Detail.useEffect: ' + GRI_SN);
    getFeedbackDetail(travelAgencyId, GRI_SN).then((res) => {
      setFeedbackRate(res.feedbackRate);
      setFeedbackReview(res.feedbackReview);
    });
    getCustomerFeedbackDetail(travelAgencyId, GRI_SN, CII_SN).then((res) => setFeedbackRate(res));
    getFeedbackImages(travelAgencyId, GRI_SN).then((res) => setFeedbackImages(res));
    getFeedbackInfo(travelAgencyId, GRI_SN).then((v) => {
      form.setFieldsValue({ info_content: v.EEF_Content });
      setFeedbackInfo(v);
    });
  }, [GRI_SN]);

  const HWO_Guide = feedbackRate && feedbackRate.HWO_Guide ? feedbackRate.HWO_Guide : [];
  const HWO_Driver = feedbackRate && feedbackRate.HWO_Driver ? feedbackRate.HWO_Driver : [];
  const HWO_Activity = feedbackRate && feedbackRate.HWO_Activity ? feedbackRate.HWO_Activity : [];
  const OtherThoughts = feedbackRate && feedbackRate.OtherThoughts ? feedbackRate.OtherThoughts : '';
  const signatureData = feedbackRate && feedbackRate.signatureData ? feedbackRate.signatureData : '';
  const PhotoPermission = feedbackRate?.PhotoPermission === 1;
  const cityName = feedbackRate?.cityName || '';
  const ECI_Content = feedbackReview && feedbackReview.ECI_Content ? feedbackReview.ECI_Content : 'None';
  const fileList = feedbackImages;

  const handleChange = (info) => {
    let newFileList = [...info.fileList];
    newFileList = newFileList.map((file) => {
      if (file.response && file.response.result) {
        file.url = file.response.result.file_url;
      }
      return file;
    });
    setFeedbackImages(newFileList);
  };

  const handRemove = (info) => {
    return removeFeedbackImages(info.url);
  };

  const onFinish = (values) => {
    // console.log("Success:", values);
    if (values) {
      postFeedbackInfo(feedbackInfo.EEF_VEI_SN, feedbackInfo.EEF_GRI_SN, feedbackInfo.EEF_EOI_SN, values.info_content).then(() => {
        notification.success({
          message: `Notification`,
          description: 'Submit Successful',
          placement: 'top',
          duration: 4,
        });
      });
    }
  };

  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      <Row gutter={16}>
        <Col span={20}></Col>
        <Col span={4}>
          <Button type='link' onClick={() => navigate('/feedback')}>
            Back
          </Button>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={4}></Col>
        <Col span={18}>
          <Card
            type='inner'
            title={
              <Title level={4}>
                Post Survey {RefNo} in {cityName}
              </Title>
            }>
            <Form labelCol={{ span: 5 }}>
              <Divider orientation='left'>How satisfied were you with your tour guide?</Divider>
              {HWO_Guide.map((ele) => (
                <Form.Item label={ele.Describe} key={ele.id}>
                  <Space>
                    <Rate disabled value={ele.rate} />
                    <span className='ant-rate-text'>{desc[ele.rate]}</span>
                  </Space>
                </Form.Item>
              ))}

              <Divider orientation='left'>How about the Driver and Car/Van?</Divider>
              {HWO_Driver.map((ele) => (
                <Form.Item label={ele.Describe} key={ele.id}>
                  <Space>
                    <Rate disabled value={ele.rate} />
                    <span className='ant-rate-text'>{desc[ele.rate]}</span>
                  </Space>
                </Form.Item>
              ))}

              <Divider orientation='left'>General Experience with:</Divider>
              {HWO_Activity.map((ele) => (
                <Form.Item label={ele.Describe} key={ele.id}>
                  <Space>
                    <Rate disabled value={ele.rate} />
                    <span className='ant-rate-text'>{desc[ele.rate]}</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>
              <Divider orientation='left'>Signature:</Divider>
              {signatureData ? <img id='signature-img' alt='customer signature' title='customer signature' src={signatureData} /> : null}
            </Form>
          </Card>
        </Col>
        <Col span={4}></Col>
      </Row>

      <Row gutter={16}>
        <Col span={4}></Col>
        <Col span={18}>
          <Card type='inner' title={<Title level={4}>External Reviews</Title>}>
            <Text>{ECI_Content}</Text>
          </Card>
        </Col>
        <Col span={4}></Col>
      </Row>

      <Row gutter={16}>
        <Col span={4}></Col>
        <Col span={18}>
          <Card type='inner' title={<Title level={4}>Feedback from local agent</Title>}>
            <Form name='feedback_detail_from' onFinish={onFinish} labelCol={{ span: 5 }} form={form}>
              <Form.Item>
                <Upload
                  name='ghhfile'
                  // accept="image/*"
                  multiple={true}
                  action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GRI_SN}&VEI_SN=${travelAgencyId}&token=${token}`}
                  fileList={fileList}
                  listType='picture-card'
                  onChange={handleChange}
                  onRemove={handRemove}>
                  <div>
                    <PlusOutlined />
                    <div style={{ marginTop: 8 }}>Upload photos</div>
                  </div>
                </Upload>
              </Form.Item>
              <Form.Item
                name='info_content'
                rules={[
                  {
                    required: true,
                    message: 'Please input your messages!',
                  },
                ]}>
                <Input.TextArea rows={6} placeholder='Any feedback for this group you would like to send to Asia Highlights'></Input.TextArea>
              </Form.Item>
              <Form.Item>
                <Button type='primary' htmlType='submit'>
                  Submit
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={4}></Col>
      </Row>
    </Space>
  );
}

export default Detail;