import React, { Fragment, useContext, useState, useEffect } from 'react'
import './Exceptions.css'
import { Row, Column, Container, Button } from '../chromaComponents'
import { SearchResult, SearchQuotesOrderBy } from '../../models/QuoteSearchModels'
import { StateContext } from '../../../src/state/StateProvider'
import { UserAccessLevel } from '../../models/Enums'
import { Mutations } from '../../state/Mutations'
import * as mappingHelper from '../../utils/fieldMappingHelper'
import { Redirect } from 'react-router-dom'
import * as df from '../../utils/dateFormatters'
import * as adHocHelper from '../../utils/adHocHelper'
import { userHasAccess } from '../../services/userAccessService'
import { User } from '../../models/Models'
import { NotificationContext } from '../../state/NotificationProvider'
import SearchQuotes from '../SearchQuote/SearchQuotes'
import * as sortHelper from '../../utils/sortHelpers'

const Exceptions = () => {
  const [state, dispatch] = useContext(StateContext)
  const [, dispatchNotification] = useContext(NotificationContext)
  const user = state?.user as User
  const searchQuoteResult = state?.searchQuote as SearchResult
  const [orderKey, setOrderKey] = useState<sortHelper.QuoteSearchSortKey>()
  const [orderAsc, setOrderAsc] = useState(false)
  const [mappedData, setMappedData] = useState(
    mappingHelper.mapSearchResultsToViewModel(searchQuoteResult?.results, searchQuoteResult?.sortOrder)
  )
  const [orderedSearchResults, setOrderedSearchResults] = useState(sortHelper.sortData(mappedData, orderKey, orderAsc))

  useEffect(() => {
    setMappedData(mappingHelper.mapSearchResultsToViewModel(searchQuoteResult?.results, searchQuoteResult?.sortOrder))
    if (searchQuoteResult?.sortOrder === 'lastmodifieddate') {
      setOrderKey(sortHelper.LastModifiedDateSortKey)
      setOrderAsc(true)
    }
  }, [searchQuoteResult])

  useEffect(() => {
    setOrderedSearchResults(sortHelper.sortData(mappedData, orderKey, orderAsc))
  }, [mappedData, orderKey, orderAsc])

  useEffect(() => {
    dispatch({ type: Mutations.RESET_QUOTE })
    dispatchNotification({ type: Mutations.UPDATE_MESSAGE, payload: null })
  }, [dispatch, dispatchNotification])

  function toggleLastModifiedDateSort() {
    if (orderKey === sortHelper.LastModifiedDateSortKey) {
      setOrderAsc((prevState) => !prevState)
    } else {
      setOrderKey(sortHelper.LastModifiedDateSortKey)
      setOrderAsc(true)
    }
  }

  if (!user) {
    return <div></div>
  } else if (
    !userHasAccess(
      [UserAccessLevel.EXCEPTION_MANAGER_BASIC, UserAccessLevel.EXCEPTION_MANAGER_ADVANCED],
      user.permissions
    )
  ) {
    return <Redirect push to={'/'} />
  }

  function handleSelectQuote(quoteId: string) {
    window.open(`/exceptions/quote?quoteId=${quoteId}`)
  }

  function getTimeDifference(date1: any, date2: any) {
    const diffTime = Math.abs(date2 - date1)

    let diffDays = `${Math.floor(diffTime / (1000 * 60 * 60 * 24))}`
    if (diffDays.length < 2) {
      diffDays = `0${diffDays}`
    }

    let diffHours = `${Math.floor((diffTime / (1000 * 60 * 60)) % 24)}`
    if (diffHours.length < 2) {
      diffHours = `0${diffHours}`
    }

    let diffMinutes = `${Math.floor(diffTime / (1000 * 60)) % 60}`
    if (diffMinutes.length < 2) {
      diffMinutes = `0${diffMinutes}`
    }

    return `${diffDays}:${diffHours}:${diffMinutes}`
  }

  function getSearchResults() {
    return (
      <Fragment>
        <Row>
          <Column xs={2}>
            <b>Quote ID</b>
          </Column>
          <Column xs={1}>
            <b>Quote Status</b>
          </Column>
          <Column xs={1}>
            <b>Transaction Type</b>
          </Column>
          <Column xs={1}>
            <b>Branch</b>
          </Column>
          <Column xs={1}>
            <b>NZI Policy ID</b>
          </Column>
          <Column xs={1}>
            <b>Partner Policy ID</b>
          </Column>
          <Column xs={2}>
            <b>Client Name</b>
          </Column>
          <Column xs={2}>
            <b>Date Attempted</b>
            <div>
              <Button secondary size="xs" onClick={toggleLastModifiedDateSort}>
                {orderKey === sortHelper.LastModifiedDateSortKey
                  ? sortHelper.getSortDisplayString(orderKey, orderAsc)
                  : '--'}
              </Button>
            </div>
          </Column>
          <Column xs={1}>
            <b>Age</b>
          </Column>
        </Row>
        <table className="tblResults">
          <tbody>
            {orderedSearchResults.map((m) => (
              <tr key={`${m.quoteId}-${m.riskId}`}>
                <Row>
                  <Column xs={2}>
                    <Button
                      link
                      id="btnQuoteId"
                      onClick={() => {
                        handleSelectQuote(m.quoteId)
                      }}
                    >
                      <div className={adHocHelper.getClassNameByPriority(m.priority)}>
                        {m.priority ? `${m.priority}: ${m.quoteId}` : m.quoteId}
                      </div>
                    </Button>
                  </Column>
                  <Column xs={1}>
                    <div className="text-overflow">{m.status}</div>
                  </Column>
                  <Column xs={1}>
                    <div className="text-overflow">{mappingHelper.getTransactionTypeShortCode(m.transactionType)}</div>
                  </Column>
                  <Column xs={1}>{m.brokerBranch}</Column>
                  <Column xs={1}>
                    <div className="text-overflow"> {m.policyId}</div>
                  </Column>
                  <Column xs={1}>
                    <div className="text-overflow"> {m.partnerPolicyId}</div>
                  </Column>
                  <Column xs={2}>
                    <div className="text-overflow"> {m.clientName}</div>
                  </Column>
                  <Column xs={2}>
                    <div className="text-overflow">{df.formatStringDate(m.lastModifiedDate)}</div>
                  </Column>
                  <Column xs={1}>
                    <div className="text-overflow">{getTimeDifference(new Date(), new Date(m.lastModifiedDate))}</div>
                  </Column>
                </Row>
              </tr>
            ))}
          </tbody>
        </table>
      </Fragment>
    )
  }

  return (
    <Container fluid>
      <Row margin={{ top: 5 }}>
        <SearchQuotes
          searchOptions={{
            orderBy: SearchQuotesOrderBy.LAST_MODIFIED_DATE,
            redirectToPath: '/exceptions/quote',
            clientId: {
              enabled: false,
            },
            displayReplayAllButton: userHasAccess([UserAccessLevel.EXCEPTION_MANAGER_ADVANCED], user.permissions),
          }}
          userAccessLevel={UserAccessLevel.EXCEPTION_MANAGER_BASIC}
        />
        <Column xs={10}>{getSearchResults()}</Column>
      </Row>
      <br></br>
    </Container>
  )
}

export default Exceptions