import React from 'react';
import { Header, Table, Modal, Button } from 'semantic-ui-react';
import {
    getSchedule,
    payload,
    generateTokenIfNeeded
} from "../../helpers/api";
import {formattedAddress, unwrapAppointment} from "../../helpers/func";
import AuthRoute from "../AuthRoute";
import Timeline from "../elements/timeline/Timeline";

class SchedulePage extends AuthRoute {

    state = {
        account: '',
        appointments: [],
        appointmentRows: [],
        selectedAppointment: {},
        modalOpen: false
    };

    clicked = appointment => () => {
        this.setState({modalOpen: true, selectedAppointment: appointment});
    }; // Opens the appointment modal.

    modalDidClose = () => {
        this.setState({modalOpen: false});
    };


    renderTableRow = function(appointment) {
        const self = this;
        return(
            <Table.Row onClick={self.clicked(appointment)} key={appointment["uuid"]}>
                <Table.Cell>
                    {appointment["assigned_to"].fname + ' ' + appointment["assigned_to"].lname}
                </Table.Cell>
                <Table.Cell>
                    {appointment["client"].fname + ' ' + appointment["client"].lname}
                </Table.Cell>
                <Table.Cell>
                    {appointment["description"]}
                </Table.Cell>
                <Table.Cell>
                    {appointment["date_time"]}
                </Table.Cell>
            </Table.Row>
        );
    };

    //Todo -> Stop the endpoint from getting called twice.
    componentDidMount() {
        super.componentDidMount();
        const self = this;

        generateTokenIfNeeded().then(function () {
            console.log('Retrieving Schedule...');
            return getSchedule();
        }).then(function (res) {
            const appts = payload(res).appointments;
            const apptRows = appts.map((appt) => {
                return self.renderTableRow(appt);
            });
            self.setState({appointmentRows: apptRows, appointments: appts});
        });
    }

    render() {
        const { modalOpen, selectedAppointment } = this.state;
        const appt = unwrapAppointment(selectedAppointment);
        return (
          <div className="Scheduler-body">
              <Timeline/>
              <Modal size={'large'} open={modalOpen} onClose={this.modalDidClose}>
                  <Modal.Header>
                      <Header content={appt.description + ' for ' + appt.client.fname + ' ' + appt.client.lname} as={'h1'}/>
                  </Modal.Header>
                  <Modal.Content>
                      <p><b>Assigned To: </b>{appt.assignedTo.fname + ' ' + appt.assignedTo.lname}</p>
                      <p><b>Client: </b>{appt.client.fname + ' ' + appt.client.lname}</p>
                      <p><b>Description: </b>{appt.description} </p>
                      <p><b>Date/Time: </b>{appt.dateTime} </p>
                      <div><b>Address: </b> {formattedAddress(appt.client.address)}</div>
                  </Modal.Content>
                  <Modal.Actions>
                      <Button positive onClick={this.modalDidClose} icon='checkmark' labelPosition='right' content='Close' />
                  </Modal.Actions>
              </Modal>
          </div>
        );
    }
}


export default SchedulePage;