import { Checkbox, Col, DatePicker, Modal, Row, Tabs, TimePicker } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";



export default function ScheduleJobModalComponent({
  existingAppointments,
  appData,
  setAppData,
  formData,
  setFormData,
  ...props
}) {
  const { t } = useTranslation();
  //TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
  return (
    <Modal
      {...props}
      width={"80%"}
      maskClosable={false}
      destroyOnClose={true}
      okButtonProps={{ disabled: appData.start ? false : true }}
    >
      <Row>
        <Col span={14}>
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="SMART Scheduling" key="auto">
              Automatic Job Selection.
            </Tabs.TabPane>
            <Tabs.TabPane tab="Manual Scheduling" key="manual">
              <Row>
                Manual Job Selection Scheduled Time
                <DatePicker
                  value={appData.start}
                  onChange={e => {
                    setAppData({ ...appData, start: e });
                  }}
                />
                <TimePicker
                  value={appData.start}
                  format={"HH:mm"}
                  minuteStep={15}
                  onChange={e => {
                    setAppData({ ...appData, start: e });
                  }}
                />
              </Row>
            </Tabs.TabPane>
          </Tabs>
          <ScheduleExistingAppointmentsList
            existingAppointments={existingAppointments}
          />
          {
            //TODO Build out notifications.
          }
          <Checkbox
            defaultChecked={formData.notifyCustomer}
            onChange={e =>
              setFormData({ ...formData, notifyCustomer: e.target.checked })
            }
          >
            {t("jobs.labels.appointmentconfirmation")}
          </Checkbox>
        </Col>
        <Col span={10}>
          <ScheduleDayViewContainer day={appData.start} />
        </Col>
      </Row>
    </Modal>
  );
}
