import React, { useContext, useState, useEffect } from 'react';
import { Store } from '../../../../store/Store';
import './style.scss';
import {
  updateSelectedTickets,
  toggleRespondModal,
  toggleReopenModal,
  toggleClosedTickets,
  updateSortedDocs,
  updateSortCriterion
} from '../../../../store/actions';
import { sortDocsBy } from '../../../../utils/sortDocsBy';
import { stripDivisionPrefix } from '../../../../utils/stripDivisionPrefix';
import { SortBySelect } from '../SortBySelect';

export const DrawerHeader = ({ docs, isFolderDrawerVisible }) => {
  const { state, dispatch } = useContext(Store);

  const {
    selectedTickets,
    closedTicketsVisible,
    ticketDetail,
    division,
    folder,
    ticketGroupLabel
  } = state;

  const [allTicketsSelected, toggleAllTicketsSelected] = useState(false);

  useEffect(() => {
    if (!isFolderDrawerVisible || selectedTickets.length === 0)
      toggleAllTicketsSelected(false);
  }, [isFolderDrawerVisible, selectedTickets]);

  const handleSelectAllClick = () => {
    const toggled = !allTicketsSelected;
    toggleAllTicketsSelected(toggled);
    if (toggled === true) {
      const ids = docs.map(({ id }) => id);
      updateSelectedTickets(ids, dispatch);
    } else {
      updateSelectedTickets([], dispatch);
    }
  };

  const handleSortByChange = ({ value }, docs) => {
    const updatedSortOrder = sortDocsBy(docs, value);
    updateSortedDocs(updatedSortOrder, dispatch);
    updateSortCriterion(value, dispatch);
  };

  const handleOpenOrClose = e => {
    updateSortedDocs([], dispatch);
    toggleClosedTickets(e.target.getAttribute('name') === 'closed', dispatch);
  };

  const folderAbbrev = folder.label
    ? stripDivisionPrefix(division.label, folder.label).substring(0, 2)
    : '';

  const responseTypesArray = selectedTickets.reduce((array, ticket) => {
    const ticketDoc = ticketDetail
      ? ticketDetail
      : state.allDocs.find(doc => doc.doc && doc.id === ticket);
    let responseType = ticketDetail ? ticketDoc.docType : ticketDoc.doc.docType;

    if (responseType === 'fieldMeet') {
      responseType = (ticketDetail
      ? ticketDoc.fieldMeetScheduledDate
      : ticketDoc.doc.fieldMeetScheduledDate)
        ? 'scheduledFieldMeet'
        : 'unscheduledFieldMeet';
    }

    if (!array.includes(responseType)) {
      array.push(responseType);
    }
    return array;
  }, []);

  let validResponseType;
  if (responseTypesArray.length === 1) {
    switch (responseTypesArray[0]) {
      case 'scheduledFieldMeet':
        validResponseType = 'Complete';
        break;
      case 'unscheduledFieldMeet':
        validResponseType = 'Schedule';
        break;
      case 'ticket':
        validResponseType = 'Respond';
        break;
      case 'standby':
        validResponseType = 'Schedule';
        break;
      default:
        validResponseType = null;
    }
  }

  return (
    <div className="drawer-header-wrapper">
      <div className="ticket-group-label">{ticketGroupLabel}</div>
      {selectedTickets.length > 0 ? (
        <div className="selected-tickets-display-info-container">
          <div className="selected-tickets-count-container">
            <h2>+{selectedTickets.length}</h2>
            <h4>Ticket{selectedTickets.length > 1 ? 's' : ''} Selected</h4>
          </div>
          <div className={'action-button-container'}>
            <button
              className="cancel-button"
              type="button"
              onClick={() => updateSelectedTickets([], dispatch)}
            >
              Cancel
            </button>
            {closedTicketsVisible ? (
              <>
                <button
                  type="button"
                  onClick={() => toggleReopenModal(true, dispatch)}
                >
                  Reopen
                </button>
                <button
                  type="button"
                  onClick={() => toggleRespondModal(true, dispatch)}
                >
                  Append
                </button>
              </>
            ) : (
              <>
                {/*TODO uncomment once IRTH cutover is complete*/}
                {/*<button type="button" onClick={() => toggleMoveModal(true, dispatch)}>Move</button>*/}
                {validResponseType && (
                  <button
                    className="valid-response-type-button"
                    type="button"
                    onClick={() => toggleRespondModal(true, dispatch)}
                  >
                    {validResponseType}
                  </button>
                )}
              </>
            )}
          </div>
        </div>
      ) : (
        <div className="unselected-tickets-display-info-container">
          <div className="division-and-folder-container">
            <div className="folder-letters">
              <p>{folderAbbrev}</p>
            </div>
            <div className="folder-name">{folder.label}</div>
          </div>
          <div className="open-closed-button-container">
            <div onClick={handleOpenOrClose}>
              <p className={closedTicketsVisible ? '' : 'selected'}>Open</p>
            </div>
            <div name="closed" onClick={handleOpenOrClose}>
              <p
                name="closed"
                className={closedTicketsVisible ? 'selected' : ''}
              >
                Closed
              </p>
            </div>
          </div>
        </div>
      )}
      <div className="drawer-filter-selector">
        <SortBySelect
          docs={docs}
          onChange={val => handleSortByChange(val, docs)}
        />
        <div className="select-all" onClick={handleSelectAllClick}>
          {allTicketsSelected ? 'Deselect All' : 'Select All'}
        </div>
      </div>
    </div>
  );
};