import { tr } from "date-fns/locale";
import React, { useEffect, useState, useMemo, useContext } from "react";
import { TaxiOrder_type, TaxiOrder_initial, TaxiOrder_fieldName, TaxiOrder_tableData } from '../types/taxiOrderType';
import { differenceInDays } from 'date-fns';
import { getCsrfToken } from "../../../../../resources/js/services/getCsrfService";
import { Button, TextInput, Select, Option } from '@SharePoint/rencredit_uikit';
import { EntityHistoryProps } from "../../../../../resources/js/components/entityHistory/EntityHistory";
import { HistoryProvider, HistoryContext } from "../../../../../resources/js/contexts/HistoryContext";
import { PopupContext } from "../../../../../resources/js/contexts/PopupContext";
import { PreloaderContext } from "../../../../../resources/js/contexts/PreloaderContext";
import api from "../../../../../resources/js/api";

type EmpSupervisorsData = {
  emp_login: string, 
  emp_supervisor: string
}

export default function TaxiHome ()
{
  //Массив полей для отображения в таблицах с заяками. Учитывается, в том числе, порядок
  const rqstTableFields = ['id', 'emp_login', 'emp_supervisor', 'emp_phone', 'taxi_date', 'taxi_time', 'taxi_address_from', 'taxi_address_to', 'cancel_rqst'];
  //Формируем объект с полями для таблицы  
  const rqstTableHeaderFields: Record<keyof TaxiOrder_tableData, string> = Object.assign({}, ...rqstTableFields.map( field => {return {[field]: TaxiOrder_fieldName[field]}}));
  const rqstTableHeader:string[] = Object.keys(TaxiOrder_fieldName).map(rqstFieldName => TaxiOrder_fieldName[rqstFieldName]);
  const [ccEmp, setCcEmp] = useState<string[]>([]);
  //Стейт для руководителей сотрудников
  const [empSupervisors, setEmpSupervisors] = useState<EmpSupervisorsData[]>([]);
  const [allOrders, setAllOrders] = useState<TaxiOrder_type[]>([]);
  const [filterOrders, setFilterOrders] = useState<TaxiOrder_type[]>([]);
  const [startSearch, setStartSearch] = useState<boolean>(false);
  const [rqstNumber, setRqstNumber] = useState<string>('');
  const [rqstTime, setRqstTime] = useState<string>('');
  const [rqstLogin, setRqstLogin] = useState<string>('');
  const [orderTimePeriods, setOrderTimePeriods] = useState<[{time_period: string}]>([{time_period: ''}]);

  const popupContext = useContext(PopupContext);
  const preloaderContext = useContext(PreloaderContext);

  useEffect ( () => {
    api.get('/taxi/getTimePeriods', 
    ).then(timePeriods_json => setOrderTimePeriods(timePeriods_json.data));

    // fetch('/public/api/taxi/getTimePeriods', {
    //   method: 'GET',
    //   credentials: 'include',
    // }).then(timePeriods_resp => timePeriods_resp.json().then( timePeriods_json => {
    //   setOrderTimePeriods(timePeriods_json);
    // }));
    
    setTimeout(() => {
      popupContext.addPopupArrTest([
        {message: 'для информации', timeOut: true, type: 'attention'} 
      ])
      popupContext.addPopupArrTest([
        {message: 'ошибка', timeOut: true, type: 'error'} 
      ])
    }, 1000);
    console.log(Object.keys(TaxiOrder_fieldName)) 
  }, [])

  //ГАВРИЛОВ
  //ЕСЛИ ОБЪЕКТ СО ЗНАЧЕНИЯМИ ДЛЯ ПОИСКА ПУСТОЙ - НЕ ВЫПОЛНЯЕМ ПОИСК, ВОЗВРАЩАЕМ ОПОВЕЩЕНИЕ О ПУСТЫХ УСЛОВИЯХ
  const getFilterOrders = () => {
    console.log(rqstTime)
    console.log(rqstNumber)
    console.log(rqstLogin)
    setStartSearch(true);
    // ГАВРИЛОВ. проверь
    api.post('/taxi/getFilterOrders', {
      id: rqstNumber,
      taxi_time: rqstTime,
      emp_login: rqstLogin
    }).then(filterOrdersJson => {
      setFilterOrders(filterOrdersJson.data);
    })
    // fetch('/public/api/taxi/getFilterOrders', {
    //   credentials: 'include',
    //   method: 'POST', 
    //   body: JSON.stringify({
    //     id: rqstNumber,
    //     taxi_time: rqstTime,
    //     emp_login: rqstLogin
    //   }),
    //   headers: {
    //     'content-type': 'application/json'
    //   }
    // }).then(filterOrdersRqst => filterOrdersRqst.json())
    // .then(filterOrdersJson => {
    //   setFilterOrders(filterOrdersJson);
    // })
  }

  const timePeriodOptions: Option<string>[] = useMemo(() => {
    return orderTimePeriods.map((time: {time_period: string}) => {
      return {
        caption: time.time_period,
        value: time.time_period,
        id: time.time_period
      }
    })
  }, [orderTimePeriods])

  const empLoginOptions: Option<string>[] = useMemo(() => {
    return ccEmp.map((empLogin: string) => {
      return {
        caption: empLogin,
        value: empLogin,
        id: empLogin
      }
    })
  }, [ccEmp])

  useEffect ( () => {
    Promise.all(
      [
        // fetch('/public/api/taxi/getEmpInfo', {
        //   credentials: 'include',
        //   method: 'GET',
        // }).then( empInfo_resp => empInfo_resp.json() ),
        api.get('taxi/getEmpInfo'),
        api.get('taxi/getActiveOrders'),
        // fetch('/public/api/taxi/getActiveOrders', {
        //   credentials: 'include',
        //   method: 'GET',
        // }).then( allOrders_resp => allOrders_resp.json() )
      ]
    ).then(
      ([
        {data: empInfo_json}, 
        {data: allOrders_json}
      ]) => {
        setCcEmp(empInfo_json.map( (empInfoEl: {emp_login: String}) => empInfoEl.emp_login ));
        setAllOrders(allOrders_json);
        setEmpSupervisors(empInfo_json.map( (empInfoEl: {emp_login: String, emp_group: String}) => ({emp_login: empInfoEl.emp_login, emp_supervisor: empInfoEl.emp_group}) ));
      }
    )
    
  }, [])

  const isReady = ccEmp.length > 0 && orderTimePeriods.length > 0;

  useEffect ( () => {
    console.log(!isReady)
    preloaderContext.setPreloaderVisible(!isReady)
    // setPreloaderProp(!isReady);
    // console.log(empSupervisors)
  }, [isReady])

  if (!ccEmp.length || !orderTimePeriods.length) {
    //setIsReady(true);
    return;
  } else {
    //setIsReady(false);
    // console.log(allOrders);
    console.log(ccEmp);
    console.log(orderTimePeriods);
  }

  // ГАВРИЛОВ. ОФОРМИ РЕЗУЛЬТАТЫ ПОИСКА. ПОСЛЕ ПОИСКА ПЛАВНО ОПУСКАЙ ДО ТАБЛИЦЫ РЕЗУЛЬТАТЫ ПОИСКА, ТАКЖЕ ВЫВЕДИ ЗОТЯ БЫ ТЕКСТ "РЕЗУЛЬТАТЫ ПОИСКА, СЕЙЧАС ЭТО ПРОСТО ТАБЛИЦА"

  //Гаврилов
  //Реализовать подтягивание информации
  //Реализовать переключение между БД (new and old Magic)

  //console.log(sanctumToken())

  let newDate = new Date('2024-06-05');
    newDate.setHours(0, 0, 0);

  // function callHistory(entityId) {
  //   console.log(entityId)
  
  //   return fakeObjArr;
  // }
    

  // let resultObj = {
  //   entityId: 1,
  //   entityProps: fakeObjArr
  // }

  return (
    <div id='taxi-container'>
      <Button  
        type = 'button' 
        text = 'Новая заявка' 
        onClick = { 
          () => document.location.href = 'createRqst' 
        }
        className = "taxi-btn"
      />
      <div className = "elem--title el-title--big">Активные заявки</div>
      <div className='container__table-block' id='taxi__rqst--active'>
        <HistoryProvider>
          <RqstTable
            allOrders={allOrders}
            rqstTableHeader={rqstTableHeaderFields}
            empSupervisors={empSupervisors}
          />
        </HistoryProvider>
      </div>
      <div id="taxi__home__filter-form">
        <div className = "elem--title el-title--big">Поиск заявки</div>
        <form>
          <input 
            type="hidden" 
            name="_token" 
            value={getCsrfToken()}
          />
          <div>
            <TextInput 
              labelText = 'Номер заявки'
              value = {rqstNumber}
              onChange = {(e: string) => setRqstNumber(e)}
            />
            {/* <label htmlFor="">Номер заявки</label>
            <input type="number" onChange={ e => {
              setRqstNumber(e.target.value)
            }}></input> */}
          </div>
          {/* <div>
            <label htmlFor="">Дата с</label>
            <input type="date" />
          </div>
          <div>
            <label htmlFor="">Дата по</label>
            <input type="date" />
          </div> */}
          <div>
            <Select
              labelText = "Время"
              options = {timePeriodOptions}
              size = '1'
              onChange = { (e: string) => {
                setRqstTime(e)
              }}
            />
            {/* <label htmlFor="">Время</label>
            <select name="taxi_time" id="" onChange={ e => {
              setRqstTime(e.target.value)
            }}>
              <option key='0' value=''></option>
              {
                orderTimePeriods.map( (timePeriodEl, timePeriodIndex ) => 
                  <option key={timePeriodIndex++} value={timePeriodEl.time_period}>{timePeriodEl.time_period}</option>
                )
              }
            </select> */}
          </div>
          <div>
            <Select
              labelText = "Сотрудник"
              options = {empLoginOptions}
              size = '1'
              onChange = { (e, selectedOption: {value: string}) => {
                setRqstLogin(selectedOption.value)
              }}
            />
            {/* <label htmlFor="">Логин</label>
            <select onChange={ e => setRqstLogin(e.target.value) }>
              <option key="0" value=""></option>
              {
                ccEmp.map( (empDataEl: string, empDataIndex: number) => 
                  <option key={empDataIndex++} value={empDataEl}>{empDataEl}</option>
                )
              }
            </select> */}
          </div>
          <Button 
            className = "taxi-btn"
            type = 'button'
            text = 'Искать' 
            onClick = { getFilterOrders } 
            size = 's'
            ui = 'secondary'
          />
          {/* <button type="button" onClick={getFilterOrders}>Искать</button> */}
        </form>
      </div>
      <div id = "container__filter-rqst-table">
        {
          startSearch ?
          <table>
          <thead>
            <tr>
              {
                rqstTableHeader.map( (headEl, headElIndex) => 
                  <th key={headElIndex} className = "table-header">
                    {headEl}
                  </th>)
              }
            </tr>
          </thead>
          <tbody>
            {
              filterOrders.length ?
              filterOrders.map( (rqstData: TaxiOrder_type, rqstIndex: number) => 
                <tr key={rqstIndex}>
                  {
                    Object.keys(TaxiOrder_initial).map(initField => 
                      <td>
                        {initField == 'cancel_rqst' ? (rqstData[initField] ? 'Нет' : 'Да') : rqstData[initField]}
                      </td>)
                  }
                </tr>)
              : <tr>
                  <td>Запросов не найдено</td>
                </tr>
            }
            </tbody>
          </table>
          : ''
        }
      </div>
    </div>
  )
}


function RqstTable(props: {allOrders: TaxiOrder_type[], rqstTableHeader: Record<keyof TaxiOrder_tableData, string>, empSupervisors: EmpSupervisorsData[]}){
  const historyContext = useContext(HistoryContext);
  if (!historyContext) {
    return null;
  }
  let newDate = new Date('2024-06-05');
  newDate.setHours(0, 0, 0); 
  return (
    props.allOrders.length ? 
      <table className="taxi-orders">
        <thead>
          <tr>
            {
              Object.entries(props.rqstTableHeader).map((el, index) => 
                <th key={index} className="table-header">{el[1]}</th>
              )
            }
            <th className = "table-header">Управление</th>
          </tr>
        </thead>
        <tbody>
          {
            props.allOrders.map( (rqstData: TaxiOrder_type, rqstIndex: number) => 
              <tr key = {rqstIndex}>
                {
                  Object.entries(props.rqstTableHeader).map( el => {
                    return (
                      // Если поле - руководитель сотрудника - вычисляем значение, ориентируясь на список props.empSupervisors
                      el[0] === 'emp_supervisor' ? 
                        <td key={el[0]}>{ props.empSupervisors.find(empData => empData.emp_login == rqstData.emp_login)?.emp_supervisor }</td>
                        : <td key={el[0]}>{ rqstData[el[0]] }</td>
                    )
                  })
                }
                <td className="taxi-orders__order-options">
                {/* Можно взаимодействовать только с заявками на такси на сегодняшнюю, либо завтрашнюю дату */}
                  {differenceInDays(new Date(rqstData.taxi_date), new Date()) >= 0 && !rqstData.cancel_rqst ? 
                    <>
                      <Button 
                        type = 'button'
                        onClick = { () => { document.location.href = `editOrder/${rqstData.id}` } }
                        text = {'Редактировать'}
                        ui = 'secondaryPurple'
                      />
                      <Button 
                        type = 'button'
                        onClick = { () => { document.location.href = `cancelRqst/${rqstData.id}` } }
                        text = {'Отменить'}
                        ui = 'secondaryPurple'
                      />
                      <Button 
                        type = 'button'
                        onClick = { () => { historyContext.getHistoryFromMagic('taxi', rqstData.id, TaxiOrder_fieldName) } }
                        text = {'История'}
                        ui = 'secondaryPurple'
                      />
                    </> 
                    : ""
                  }
                </td>
              </tr>
            )
          }
        </tbody>
      </table>
    : <div>Нет активных заявок</div>
  )
}