import React, {useState, useEffect} from "react";
import { useNavigate } from "react-router-dom";
import { AuthService, EventsService, CustomerService, DriverService, ResourceService } from "../../services";
import DatePicker from "react-datepicker";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Button, Modal } from "react-bootstrap";
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
import TimePicker from 'react-time-picker';
import { ManageTable, Export } from "../../shared/components";

const EventsList = () => {
  const navigate = useNavigate();
  const [events, setEvents] = useState([]);
  const [customers, setCustomers] = useState([]);
  const [resources, setResources] = useState([]);
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [sorting, setSorting] = useState({key: '', order: ''});
  const [selectedItems, setSelectedItems] = useState([]);
  const [showTransportationModal, setShowTransportationModal] = useState(false);
  const [driver, setDriver] = useState(null);
  const [driverOptions, setDriverOptions] = useState([]);
  const [transportStartTime, setTransportStartTime] = useState(null);
  const [transportOptionsList, setTransportationOptionsList] = useState([]);
  const [transportSelected, setTransportSelected] = useState(null);
  const [showDeletedItems, setShowDeletedItems] = useState(false);
  const [columns, setColumns] = useState([
    {
      key: 'customer',
      label:'Customer',
      show: true
    },
    {
      key: 'chinese_name',
      label: 'Preferred Name',
      show: true
    },
    {
      key: 'member_type',
      label: 'Member Type',
      show: true
    },
    {
      key: 'eyes_on',
      label: 'Eyes-on',
      show: true
    },
    {
      key: 'doctor',
      label: 'Doctor',
      show: true
    },
    {
      key: 'phone',
      label: 'Phone',
      show: true
    },
    {
      key: 'address',
      label: 'Address',
      show: true
    },
    {
      key: 'translation',
      label: 'Translation',
      show: true
    },
    {
      key: 'newPatient',
      label: 'New Patient',
      show: true
    },
    {
      key: 'needId',
      label: 'Need ID',
      show: true
    },
    {
      key: 'disability',
      label: 'Disability',
      show: true
    },
    {
      key: 'startTime',
      label: 'Start Time',
      show: true
    },
    {
      key: 'fasting',
      label: 'Fasting',
      show: true
    },
    {
      key: 'transportation',
      label: 'Driver',
      show: true
    }
  ]);

  const checkDisability = (customers, event) => {
    const currentCustomer = customers?.find(c => c?.id === event?.data?.customer || c?.name === event?.data?.client_name || c?.name === event?.target_name);
    return currentCustomer?.disability || event?.data?.disability?.toLowerCase() === 'yes' || false;
  };

  useEffect(() => {
    if (!AuthService.canAccessLegacySystem()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
    CustomerService.getAllCustomers().then((data) => {
      setCustomers(data.data);
    })
    DriverService.getAllActiveDrivers().then((data) => {
      console.log('drivers', data.data);
      setDriverOptions(data.data);
    })
    ResourceService.getAll().then(data => {
      setResources(data.data);
    }) 
  }, []);

  useEffect(() => {
    if (customers?.length > 0 && resources?.length>0) {
      EventsService.getAllEvents({ date: EventsService.formatDate(selectedDate) }).then((data) => {
        setEvents(data.data.filter((item) => {
          item.customer = item?.data?.customer ? (customers.find(c=>c.id === item?.data?.customer)?.name || item?.data?.client_name || '') : (item?.data?.client_name || '');
          item.doctor = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.name || item?.data?.resource_name || '') : (item?.data?.resource_name || '');
          item.phone = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.phone || item?.data?.resource_phone || '') : (item?.data?.resource_phone || '');
          item.address = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.address || item?.data?.resource_address || '') : (item?.data?.resource_address || '');
          item.translation = item?.data?.interpreter || '';
          item.newPatient = item?.data?.new_patient || '';
          item.needId = item?.data?.need_id || '';
          item.disability = item?.data?.disability || '';
          item.member_type = item?.data?.customer ? (customers.find(c => c.id === item?.data?.customer)?.type || '') : '';
          item.eyes_on = checkDisability(customers, item) ? 'Yes' : 'No';
          item.startTime = item?.start_time? `${new Date(item?.start_time).toLocaleDateString()} ${new Date(item?.start_time).toLocaleTimeString()}` : '' ;
          item.fasting = item?.data?.fasting || '';
          item.chinese_name = item?.data?.customer ? customers.find(c => c.id === item?.data?.customer)?.name_cn : (customers?.find(c=> c?.name === item?.data?.client_name || c?.name === item?.target_name )?.name_cn || '');
          item.transportation = item?.link_event_name || '';
          item.dob = item?.data?.customer ? customers.find(c => c.id === item?.data?.customer)?.birth_date : (item?.data?.client_birth_date || '');
          item.transMethod = item?.data?.trans_method;
          return item;
        }).filter(item => item.type === 'medical' && item.confirmed));
        setTransportationOptionsList(data.data.filter((item) => item.type === 'transportation' && item.status === 'active'))
      })
    }
  }, [selectedDate, resources, customers]);



  useEffect(() => {
    const newEvents = [...events];
    const sortedEvents = sorting.key === '' ? newEvents : newEvents.sort((a, b) => {
      return a[sorting.key].localeCompare(b[sorting.key]);
    });
    setEvents(
      sorting.order === 'asc' ? sortedEvents : sortedEvents.reverse()
    )
  }, [sorting]);


  const redirectToAdmin = () => {
    navigate(`/medical`)
  }

  const goToEdit = (id) => {
    navigate(`/medical/events/edit/${id}`)
  }

  const goToCreateNew = () => {
    navigate(`/medical/events`)
  }

  const goToEventsCalendar = () => {
    navigate(`/medical/events/calendar`)
  }

  const goToMultipleList = () => {
    navigate(`/medical/events/multiple-list`)
  }

  const goToResourceList = () => {
    navigate(`/medical/resources/list`)
  }


  const goToView = (id) => {
    navigate(`/medical/events/${id}`)
  }

  const goToNextDay = () => {
    setSelectedDate(new Date(selectedDate.setDate(selectedDate.getDate() + 1)));
  }

  const goToPreviousDay = () => {
    setSelectedDate(new Date(selectedDate.setDate(selectedDate.getDate() - 1)));
  }

  const showDeleted = (value) => {
		setShowDeletedItems(value === 'archivedEvents');
		// Recover all filters
		// setKeyword('');
		setSorting({key: '', order: ''});
		setSelectedItems([]);
	}

  const getSortingImg = (key) => {
    return sorting.key === key ? (sorting.order === 'asc' ? 'up_arrow' : 'down_arrow') : 'default';
  }

  const sortTableWithField = (key) => {
    let newSorting = {
      key,
      order: 'asc',
    }
    
    if (sorting.key === key && sorting.order === 'asc') {
      newSorting = {...newSorting, order: 'desc'};
    }
    setSorting(newSorting);
  }

  const toggleSelectedAllItems = () => {
    if (selectedItems.length !== events.length || selectedItems.length === 0) {
      const newSelectedItems = [...events].map((event) => event.id);
      setSelectedItems(newSelectedItems);
    } else {
      setSelectedItems([]);
    }
  }

  const toggleItem  = (id) => {
    if (selectedItems.includes(id)) {
      const newSelectedItems = [...selectedItems].filter((item) => item !== id);
      setSelectedItems(newSelectedItems);
    } else {
      const newSelectedItems = [...selectedItems, id];
      setSelectedItems(newSelectedItems);
    }
  }

  const checkSelectAll = () => {
    return selectedItems.length === events.length && selectedItems.length > 0;
  }

  const disableAssignTransportationButton  = () => {
    return (!transportSelected || transportSelected === '') || ((transportSelected === 'create_new') && (!driver || !transportStartTime || driver === '' || transportStartTime === ''));
  }

  const closePanel = () => {
    setShowTransportationModal(false);
    setTransportStartTime(null);
    setDriver(null);
    setTransportSelected(null);
  }

  const assignDriver = () => {
    // if select create new event, then create a new transportation event first
    if (transportSelected === 'create_new') {
      const dateString = new Date().toLocaleDateString();
      const startDateTime = new Date(`${dateString} ${transportStartTime}`);
      const transportationParameter = {
        title: `${driverOptions.find((item) => item.id === driver)?.name} ${startDateTime.toLocaleTimeString()}`,
        description: 'transportatoin for med events',
        type: 'transportation',
        source_type: 'resource',
        source_uuid: '',
        target_type: 'staff',
        target_uuid: driver,
        start_time: startDateTime,
        stop_time: startDateTime,
        status: 'active',
        create_by: JSON.parse(localStorage.getItem('user'))?.name,
        create_date: new Date(),
        edit_by: JSON.parse(localStorage.getItem('user'))?.name,
        edit_date: new Date(),
        edit_history: [{
          employee: JSON.parse(localStorage.getItem('user'))?.name,
          date: new Date()
        }]
      };

      EventsService.createNewEvent(transportationParameter).then(data => {
        const trans = data.data;
        EventsService.assignTransportationToEvents({
          transportationId: trans.id,
          transportationName: trans.title,
          eventIds: selectedItems
        }).then(() => {
          setSelectedItems([]);
          EventsService.getAllEvents({ date: EventsService.formatDate(selectedDate) }).then((data) => {
            const results = [...data.data];
            const eventsResults = results.filter((item) => {
              item.customer = item?.data?.customer ? (customers.find(c=>c.id === item?.data?.customer)?.name || item?.data?.client_name || '') : (item?.data?.client_name || '');
              item.doctor = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.name || item?.data?.resource_name || '') : (item?.data?.resource_name || '');
              item.phone = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.phone || item?.data?.resource_phone || '') : (item?.data?.resource_phone || '');
              item.address = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.address || item?.data?.resource_address || '') : (item?.data?.resource_address || '');
              item.translation = item?.data?.interpreter || '';
              item.newPatient = item?.data?.new_patient || '';
              item.needId = item?.data?.need_id || '';
              item.disability = item?.data?.disability || '';
              item.member_type = item?.data?.customer ? (customers.find(c => c.id === item?.data?.customer)?.type || '') : '';
              item.eyes_on = checkDisability(customers, item) ? 'Yes' : 'No';
              item.startTime = item?.start_time? `${new Date(item?.start_time).toLocaleDateString()} ${new Date(item?.start_time).toLocaleTimeString()}` : '' ;
              item.fasting = item?.data?.fasting || '';
              item.chinese_name = item?.data?.customer ? customers.find(c => c.id === item?.data?.customer)?.name_cn : (customers?.find(c=> c?.name === item?.data?.client_name || c?.name === item?.target_name )?.name_cn || '');
              item.transportation = item?.link_event_name || '';
              item.dob = item?.data?.customer ? customers.find(c => c.id === item?.data?.customer)?.birth_date : (item?.data?.client_birth_date || '');
              item.transMethod = item?.data?.trans_method;
              return item;
            }).filter(item => item.type === 'medical' && item.confirmed);
            const newEvents = [...eventsResults];
            const sortedEvents = sorting.key === '' ? newEvents : newEvents.sort((a, b) => {
              return a[sorting.key].localeCompare(b[sorting.key]);
            });
            setEvents(
              sorting.order === 'asc' ? sortedEvents : sortedEvents.reverse()
            )
            setTransportationOptionsList(data.data.filter((item) => item.type === 'transportation' && item.status === 'active'));
            closePanel();
          })
        });
      }).catch((err) => console.log('Transportation Event Creation failed'))
    } else {
      if (transportSelected && transportSelected !== '') {
        EventsService.assignTransportationToEvents({
          transportationId: transportSelected,
          transportationName: transportOptionsList.find((item) => item.id === transportSelected)?.title,
          eventIds: selectedItems
        }).then(() => {
          setSelectedItems([]);
          EventsService.getAllEvents({ date: EventsService.formatDate(selectedDate) }).then((data) => {
            const results = [...data.data];
            const eventsResults = results.filter((item) => {
              item.customer = item?.data?.customer ? (customers.find(c=>c.id === item?.data?.customer)?.name || item?.data?.client_name || '') : (item?.data?.client_name || '');
              item.doctor = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.name || item?.data?.resource_name || '') : (item?.data?.resource_name || '');
              item.phone = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.phone || item?.data?.resource_phone || '') : (item?.data?.resource_phone || '');
              item.address = item?.data?.resource ? (resources.find(r=> r.id === item?.data?.resource)?.address || item?.data?.resource_address || '') : (item?.data?.resource_address || '');
              item.translation = item?.data?.interpreter || '';
              item.newPatient = item?.data?.new_patient || '';
              item.needId = item?.data?.need_id || '';
              item.disability = item?.data?.disability || '';
              item.member_type = item?.data?.customer ? (customers.find(c => c.id === item?.data?.customer)?.type || '') : '';
              item.eyes_on = checkDisability(customers, item) ? 'Yes' : 'No';
              item.startTime = item?.start_time? `${EventsService.formatDate(new Date(item?.start_time))} ${new Date(item?.start_time).toLocaleTimeString('en-US', { hour: '2-digit', minute: 'numeric', hour12: true })}` : '' ;
              item.fasting = item?.data?.fasting || '';
              item.chinese_name = item?.data?.customer ? customers.find(c => c.id === item?.data?.customer)?.name_cn : (customers?.find(c=> c?.name === item?.data?.client_name || c?.name === item?.target_name )?.name_cn || '');
              item.transportation = item?.link_event_name || '';
              item.dob = item?.data?.customer ? customers.find(c => c.id === item?.data?.customer)?.birth_date : (item?.data?.client_birth_date || '');
              item.transMethod = item?.data?.trans_method;
              return item;
            }).filter(item => item.type === 'medical' && item.confirmed);
            const newEvents = [...eventsResults];
            const sortedEvents = sorting.key === '' ? newEvents : newEvents.sort((a, b) => {
              return a[sorting.key].localeCompare(b[sorting.key]);
            });
            setEvents(
              sorting.order === 'asc' ? sortedEvents : sortedEvents.reverse()
            )
            // setTransportationOptionsList(data.data.filter((item) => item.type === 'transportation' && item.status === 'active'));
            closePanel();
          })
        });
      }
    };
  };

  const table = (statusParam) => <div className="list row mb-4">
    <div className="col-md-12">
      <table className="personnel-info-table"> 
        <thead>
          <tr>
            <th className="th-checkbox"><input type="checkbox" checked={checkSelectAll()} onClick={() => toggleSelectedAllItems()}></input></th>
            <th className="th-index">No.</th>
            {
              columns.filter(col => col.show).map((column, index) => <th className="sortable-header" key={index}>
                {column.label}  <span className="float-right" onClick={() => sortTableWithField(column.key)}><img src={`/images/${getSortingImg(column.key)}.png`}></img></span>
              </th>)
            }
            <th>Customer Date of Birth</th>
            <th>Transportation</th>
          </tr>
        </thead>
        <tbody>
          {
            events && events.filter(event => event.status === statusParam).map((medicalEvent, index) => <tr key={medicalEvent.id}>
              <td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td>
              <td className="td-index">{index + 1}</td>
              {columns.find(col => col.key === 'customer')?.show && <td>{medicalEvent?.customer}</td>}
              {columns.find(col => col.key === 'chinese_name')?.show && <td>{medicalEvent?.chinese_name}</td>}
              {columns.find(col => col.key === 'member_type')?.show && <td>{medicalEvent?.member_type}</td>}
              {columns.find(col => col.key === 'eyes_on')?.show && <td>{medicalEvent?.eyes_on}</td>}
              {columns.find(col => col.key === 'doctor')?.show && <td>{medicalEvent?.doctor}</td>}
              {columns.find(col => col.key === 'phone')?.show && <td>{medicalEvent?.phone}</td>}
              {columns.find(col => col.key === 'address')?.show && <td>{medicalEvent?.address}</td>}
              {columns.find(col => col.key === 'translation')?.show && <td>{medicalEvent?.translation}</td>}
              {columns.find(col => col.key === 'newPatient')?.show && <td>{medicalEvent?.newPatient}</td>}
              {columns.find(col => col.key === 'needId')?.show && <td>{medicalEvent?.needId}</td>}
              {columns.find(col => col.key === 'disability')?.show && <td>{medicalEvent?.disability}</td>}
              {columns.find(col => col.key === 'startTime')?.show && <td>{medicalEvent?.startTime}</td>}
              {columns.find(col => col.key === 'fasting')?.show && <td>{medicalEvent?.fasting}</td>}
              {columns.find(col => col.key === 'transportation')?.show && <td>{medicalEvent?.transportation}</td>}
              <td>{medicalEvent?.dob}</td>
              <td>{medicalEvent?.transMethod}</td>
            </tr>)
          }
        </tbody>
      </table>
    </div>
  </div>;

  
  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item>Medical</Breadcrumb.Item>
          <Breadcrumb.Item active>
            Appointment Information
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>
              Medical Event One-Day List (With Driver Assignment)
             {/* <button className="btn btn-primary btn-sm" onClick={() => {goToCreateNew()}}>Create New Customer</button> 
             <button className="btn btn-link btn-sm" onClick={() => {redirectToAdmin()}}>Back</button> */}
           </h4> 
        </div>
      </div>
      <div className="app-main-content-list-container">
				<div className="app-main-content-list-func-container">
					<Tabs defaultActiveKey="activeEvents" id="requests-tab" onSelect={(k) => showDeleted(k)}>
						<Tab eventKey="activeEvents" title="Active Appointments">
              <div className="app-main-content-fields-section with-function">
                <Button className="me-2" variant="outline-primary" size="sm" onClick={() => goToPreviousDay()} > {'<'} </Button>
                <DatePicker className="me-2" selected={selectedDate}  onChange={(v) => setSelectedDate(v)} />
                <Button className="me-2 ms-2"  variant="outline-primary" size="sm" onClick={() => goToNextDay()}> {'>'} </Button>
                <Button className="me-2"  variant="primary" size="sm" disabled={selectedItems.length === 0} onClick={() => setShowTransportationModal(true)}> + Show Assign Transportation Panel</Button>
              </div>
							{table('active')}
						</Tab>
						<Tab eventKey="archivedEvents" title="Archived Appointments">
              <div className="app-main-content-fields-section with-function">
              <Button className="me-2" variant="outline-primary" size="sm" onClick={() => goToPreviousDay()} > {'<'} </Button>
                <DatePicker className="me-2" selected={selectedDate}  onChange={(v) => setSelectedDate(v)} />
                <Button className="me-2 ms-2"  variant="outline-primary" size="sm" onClick={() => goToNextDay()}> {'>'} </Button>
              </div>
							{table('inactive')}
						</Tab>
					</Tabs>
					<div className="list-func-panel">
						{/* <input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword}  onChange={(e) => setKeyword(e.currentTarget.value)} /> */}
						{/* <button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button> */}
						<ManageTable columns={columns} onColumnsChange={setColumns} />
						<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Medical Appointment</button>
						<Export 
							columns={columns} 
							data={events.filter(event => event.status === (showDeletedItems ? 'inactive' : 'active'))} 
							filename="events" 
						/>
					</div>
				</div>
      </div>
      <Modal show={showTransportationModal} onHide={() => closePanel()}>
        <Modal.Header closeButton>
          <Modal.Title>Assign Transportations Panel</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <>
          <div className="app-main-content-fields-section">
              <div className="mb-4 me-4"></div>
                <div className="field-label">Select Transportation</div> 
                <select value={transportSelected} onChange={(e)=>{setTransportSelected(e.currentTarget.value)}}>
                  <option value=""></option>
                  <option value="create_new">Create A New Transportation</option>
                  {transportOptionsList.map((item) => <option key={item.id} value={item.id}>{item.title}</option>)}
                </select>
            </div>
            {transportSelected === 'create_new' && (
              <>
                <hr/>
                <div>
                  Start Time:
                  <div>
                    <TimePicker disableClock={true} value={transportStartTime} onChange={setTransportStartTime} />
                  </div>
                </div>
                
              </>)
            }

            {transportSelected === 'create_new' && (
              <>
                <hr/>
                <div>
                  Driver:
                  <div>
                    <select value={driver} onChange={(e)=>{setDriver(e.currentTarget.value)}}>
                      <option value=""></option>
                      {
                        driverOptions.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)
                      }
                    </select>
                  </div>
                </div>
              </>)
            }
          </>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => closePanel()}>
            Close
          </Button>
          <Button disabled={disableAssignTransportationButton()} variant="primary" onClick={() => assignDriver()}>
            Assign Transportation
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  )
};

export default EventsList;