import React, {useState, useContext, useEffect} from 'react'
import {FileText, Map, BarChart2} from 'react-feather'
import {keyBy} from 'lodash'

import theme from '../../../styles/theme'
import colors from '../../../styles/colors'

import {AppContext, ThemeContext} from '../../../pages'

import {findMostRecentDateForData, getReport} from '../../../lib/data'

import Scrollable from '../../scrollable'

import CovidTestsMaps from './covid-tests-maps'

import CovidTestsStatistics from './covid-tests-statistics'
import CovidTestsInformations from './covid-tests-informations'
import TerritoriesMobileMap from '../../territories-mobile-map'
import TerritoriesDesktopMap from '../../territories-desktop-map'

export const CovidTestsContext = React.createContext()

const MobileCovidTests = () => {
  const [selectedView, setSelectedView] = useState('stats')

  const app = useContext(AppContext)
  const theme = useContext(ThemeContext)

  const views = {
    map: (
      <TerritoriesMobileMap
        maps={CovidTestsMaps}
        context={CovidTestsContext}
      >
        <CovidTestsStatistics />
      </TerritoriesMobileMap>
    ),
    stats: (
      <Scrollable>
        <CovidTestsStatistics />
      </Scrollable>
    ),
    informations: (
      <Scrollable>
        <CovidTestsInformations />
      </Scrollable>
    )
  }

  const handleClick = view => {
    app.setSelectedLocation('FRA')
    setSelectedView(view)
  }

  return (
    <>
      {views[selectedView]}

      <div className='view-selector'>
        <div className={`${selectedView === 'stats' ? 'selected' : ''}`} onClick={() => handleClick('stats')}>
          <BarChart2 size={32} color={selectedView === 'stats' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'map' ? 'selected' : ''}`} onClick={() => handleClick('map')}>
          <Map size={32} color={selectedView === 'map' ? theme.primary : colors.black} />
        </div>
        <div className={`${selectedView === 'informations' ? 'selected' : ''}`} onClick={() => handleClick('informations')}>
          <FileText size={32} color={selectedView === 'informations' ? theme.primary : colors.black} />
        </div>
      </div>

      <style jsx>{`
        .view-selector {
          z-index: 1;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          box-shadow: 0 -1px 4px ${colors.lightGrey};
        }

        .view-selector > div {
          padding: 0.5em;
          margin: auto;
          margin-bottom: -4px;
        }

        .view-selector > div.selected {
          border-top: 4px solid ${theme.primary};
        }
      `}</style>
    </>
  )
}

const DesktopCovidTests = () => {
  return (
    <>
      <div className='menu'>
        <Scrollable>
          <CovidTestsStatistics />
          <CovidTestsInformations />
        </Scrollable>
      </div>

      <div className='map'>
        <TerritoriesDesktopMap maps={CovidTestsMaps} context={CovidTestsContext} />
      </div>

      <style jsx>{`
        .menu {
          z-index: 1;
          display: flex;
          flex-direction: column;
          max-width: ${theme.menuWidth};
          width: ${theme.menuWidth};
          box-shadow: 0 1px 4px ${colors.lightGrey};
        }

        .map {
          display: flex;
          flex: 1;
          flex-direction: column;
          height: 100%;
        }
      `}</style>
    </>
  )
}

const CovidTests = props => {
  const {date, setForcedDate, selectedLocation, isMobileDevice} = useContext(AppContext)

  const [selectedMapId, setSelectedMapId] = useState('Tests positifs - ce jour')
  const [selectedStat, setSelectedStat] = useState(null)

  const Component = isMobileDevice ? MobileCovidTests : DesktopCovidTests

  useEffect(() => {
    let isCancelled = false

    async function fetchMostRecentDateForData() {
      const report = await getReport(date, selectedLocation)
      const mostRecentDate = findMostRecentDateForData(report, 'testsRealises')
      if (!isCancelled) {
        setForcedDate(mostRecentDate === date ? null : mostRecentDate)
      }
    }

    fetchMostRecentDateForData()

    return () => {
      isCancelled = true
    }
  }, [date, selectedLocation, setForcedDate])

  useEffect(() => {
    const mapProperties = keyBy(CovidTestsMaps, 'property')

    if (mapProperties[selectedStat]) {
      setSelectedMapId(mapProperties[selectedStat].name)
    } else if (selectedStat === 'mixed') {
      setSelectedMapId(mapProperties.testsPositifs.name)
    }
  }, [selectedStat])

  return (
    <CovidTestsContext.Provider value={{selectedMapId, setSelectedMapId, selectedStat, setSelectedStat}}>
      <Component {...props} />
    </CovidTestsContext.Provider>
  )
}

export default CovidTests