import { useParams, useNavigate } from "react-router-dom";
import { useEffect } from 'react';
import { observer } from "mobx-react";
import { toJS } from "mobx";
import moment from "moment";
import { Row, Col, Space, Table, Typography, List, Watermark } from 'antd';
import { useStore } from '../../stores/StoreContext.js';

const { Title } = Typography;

const itineraryListColumns = [
  {
    title: 'Day',
    dataIndex: 'day',
    key: 'day',
  },
  {
    title: 'Place & Transport',
    dataIndex: 'placeTransport',
    key: 'placeTransport',
  },
  {
    title: 'Today’s Activities',
    dataIndex: 'todayActivities',
    key: 'todayActivities',
  },
  {
    title: 'Accommodation',
    dataIndex: 'accommodation',
    key: 'accommodation',
  },
  {
    title: 'Meals',
    dataIndex: 'meals',
    key: 'meals',
  },
];

function Print() {
  const navigate = useNavigate();
  const { reservationId } = useParams();
  const { reservationStore } = useStore();
  const { itineraryList, customerList } = reservationStore;

  useEffect(() => {
    console.info('Detail.useEffect: ' + reservationId);
  }, [reservationId]);

  return (
    <Watermark content={['Global Highlights', 'Discovery Your Way!']}>
    <Space direction="vertical" style={{ width: '100%' }}>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={3}>Booking for Mr. Prasanna Venkatesa Nathan(United States) trip</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Booking Number: 220629-W220420009</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Customer Names (Full name as it appears on passport):</Title>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <List
            itemLayout="horizontal"
            dataSource={toJS(customerList)}
            renderItem={(item, index) => (
              <List.Item>
                <List.Item.Meta
                  title={<span>{item.title}</span>}
                  description={item.description}
                />
              </List.Item>
            )}
          />
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Hotels and Room:</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Guide Language: English</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Notes:</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Itinerary Overview:</Title>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Table
            pagination={{
              hideOnSinglePage: true
            }}
            dataSource={toJS(itineraryList)} columns={itineraryListColumns}
          />
        </Col>
      </Row>      
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Detailed Tour Itinerary</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Packaged Price Includes:</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Packaged Price Excludes:</Title>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
          <Title level={4}>Asia Highlights Contact:</Title>
        </Col>
      </Row>
    </Space>
    </Watermark>
  );
}

export default observer(Print);