text: import axios from 'axios';
  import {format, parse} from 'date-fns';
  import React, {useEffect, useRef, useState} from 'react';
  import {Link, useParams} from 'react-router-dom';
  import * as Icon from 'react-feather';
  
  import {
    formatDateAbsolute,
    formatNumber,
    parseStateTimeseries,
  } from '../utils/common-functions';
  import {MAP_META, STATE_CODES} from '../constants';
  
  import Clusters from './clusters';
  import DeltaBarGraph from './deltabargraph';
  import Level from './level';
  import MapExplorer from './mapexplorer';
  import Minigraph from './minigraph';
  import TimeSeries from './timeseries';
  import Footer from './footer';
  
  function State(props) {
    const mapRef = useRef();
    const tsRef = useRef();
  
    const {stateCode} = useParams();
  
    const [fetched, setFetched] = useState(false);
    const [timeseries, setTimeseries] = useState({});
    const [graphOption, setGraphOption] = useState(1);
    const [timeseriesMode, setTimeseriesMode] = useState(true);
    const [timeseriesLogMode, setTimeseriesLogMode] = useState(false);
    const [stateData, setStateData] = useState({});
    const [testData, setTestData] = useState({});
    const [sources, setSources] = useState({});
    const [districtData, setDistrictData] = useState({});
    const [stateName] = useState(STATE_CODES[stateCode]);
  
    useEffect(() => {
      if (fetched === false) {
        getState(stateCode);
      }
    }, [fetched, stateCode]);
  
    const getState = async (code) => {
      try {
        const [
          {data: dataResponse},
          {data: stateDistrictWiseResponse},
          {data: statesDailyResponse},
          {data: stateTestResponse},
          {data: sourcesResponse},
        ] = await Promise.all([
          axios.get('https://api.covid19india.org/data.json'),
          axios.get('https://api.covid19india.org/state_district_wise.json'),
          axios.get('https://api.covid19india.org/states_daily.json'),
          axios.get('https://api.covid19india.org/state_test_data.json'),
          axios.get('https://api.covid19india.org/sources_list.json'),
        ]);
        const states = dataResponse.statewise;
        setStateData(states.find((s) => s.statecode === code));
        const ts = parseStateTimeseries(statesDailyResponse)[code];
        setTimeseries(ts);
        const statesTests = stateTestResponse.states_tested_data;
        const name = STATE_CODES[code];
        setTestData(
          statesTests.filter(
            (obj) => obj.state === name && obj.totaltested !== ''
          )
        );
        setDistrictData({
          [name]: stateDistrictWiseResponse[name],
        });
        const sourceList = sourcesResponse.sources_list;
        setSources(sourceList.filter((state) => state.statecode === code));
        setFetched(true);
      } catch (err) {
        console.log(err);
      }
    };
  
    const testObjLast = testData[testData.length - 1];
  
    return (
      <React.Fragment>
        <div className="State">
          <div className="state-left">
            <div className="breadcrumb fadeInUp">
              <Link to="/">Home</Link>/
              <Link to={`${stateCode}`}>{stateName}</Link>
            </div>
            <div className="header">
              <div
                className="header-left fadeInUp"
                style={{animationDelay: '0.3s'}}
              >
                <h1>{stateName}</h1>
                <h5>
                  Last Updated on{' '}
                  {Object.keys(stateData).length
                    ? formatDateAbsolute(stateData.lastupdatedtime)
                    : ''}
                </h5>
              </div>
              <div
                className="header-right fadeInUp"
                style={{animationDelay: '0.5s'}}
              >
                <h5>Tested</h5>
                <h2>{formatNumber(testObjLast?.totaltested)}</h2>
                <h5 className="timestamp">
                  {!isNaN(parse(testObjLast?.updatedon, 'dd/MM/yyyy', new Date()))
                    ? `As of ${format(
                        parse(testObjLast?.updatedon, 'dd/MM/yyyy', new Date()),
                        'dd MMM'
                      )}`
                    : ''}
                </h5>
                <h5>
                  {'per '}
                  {testObjLast?.totaltested && (
                    <a href={testObjLast.source} target="_noblank">
                      source
                    </a>
                  )}
                </h5>
              </div>
            </div>
  
            {fetched && <Level data={stateData} />}
            {fetched && <Minigraph timeseries={timeseries} />}
            {fetched && (
              <React.Fragment>
                {
                  <MapExplorer
                    forwardRef={mapRef}
                    mapMeta={MAP_META[stateName]}
                    states={[stateData]}
                    stateDistrictWiseData={districtData}
                    stateTestData={testData}
                    isCountryLoaded={false}
                  />
                }
              </React.Fragment>
            )}
  
            {fetched && (
              <div className="meta-secondary">
                <div className="unknown">
                  <Icon.AlertCircle />
                  <div className="unknown-right">
                    Awaiting district details for{' '}
                    {districtData[stateName]?.districtData['Unknown']
                      ?.confirmed || '0'}{' '}
                    cases
                  </div>
                </div>
                <div className="sources">
                  <Icon.Compass />
                  <div className="sources-right">
                    Data collected from sources{' '}
                    {sources.length > 0
                      ? Object.keys(sources[0]).map((key) => {
                          if (key.match('source') && sources[0][key] !== '') {
                            const num = key.match(/\d+/);
                            return (
                              <React.Fragment>
                                {num > 1 ? ',' : ''}
                                <a href={sources[0][key]}>{num}</a>
                              </React.Fragment>
                            );
                          }
                          return null;
                        })
                      : ''}
                  </div>
                </div>
              </div>
            )}
          </div>
  
          <div className="state-right">
            {fetched && (
              <React.Fragment>
                <div className="district-bar">
                  <div
                    className="district-bar-left fadeInUp"
                    style={{animationDelay: '0.6s'}}
                  >
                    <h2>Top districts</h2>
                    <div className="districts">
                      {districtData[stateName]
                        ? Object.keys(districtData[stateName].districtData)
                            .slice(0, 6)
                            .sort(
                              (a, b) =>
                                districtData[stateName].districtData[b]
                                  .confirmed -
                                districtData[stateName].districtData[a].confirmed
                            )
                            .map((district, index) => {
                              return (
                                <div key={index} className="district">
                                  <h2>
                                    {
                                      districtData[stateName].districtData[
                                        district
                                      ].confirmed
                                    }
                                  </h2>
                                  <h5>{district}</h5>
                                  <div className="delta">
                                    <Icon.ArrowUp />
                                    <h6>
                                      {
                                        districtData[stateName].districtData[
                                          district
                                        ].delta.confirmed
                                      }
                                    </h6>
                                  </div>
                                </div>
                              );
                            })
                        : ''}
                    </div>
                  </div>
                  <div className="district-bar-right">
                    {
                      <DeltaBarGraph
                        timeseries={timeseries.slice(-5)}
                        arrayKey={'dailyconfirmed'}
                      />
                    }
                  </div>
                </div>
  
                <Link to="/essentials">
                  <div
                    className="to-essentials fadeInUp"
                    style={{animationDelay: '0.9s'}}
                  >
                    <h2>Go to essentials</h2>
                    <Icon.ArrowRightCircle />
                  </div>
                </Link>
  
                <div
                  className="timeseries-header fadeInUp"
                  style={{animationDelay: '2.5s'}}
                  ref={tsRef}
                >
                  <div className="tabs">
                    <div
                      className={`tab ${graphOption === 1 ? 'focused' : ''}`}
                      onClick={() => {
                        setGraphOption(1);
                      }}
                    >
                      <h4>Cumulative</h4>
                    </div>
                    <div
                      className={`tab ${graphOption === 2 ? 'focused' : ''}`}
                      onClick={() => {
                        setGraphOption(2);
                      }}
                    >
                      <h4>Daily</h4>
                    </div>
                  </div>
  
                  <div className="scale-modes">
                    <label className="main">Scale Modes</label>
                    <div className="timeseries-mode">
                      <label htmlFor="timeseries-mode">Uniform</label>
                      <input
                        type="checkbox"
                        checked={timeseriesMode}
                        className="switch"
                        aria-label="Checked by default to scale uniformly."
                        onChange={(event) => {
                          setTimeseriesMode(!timeseriesMode);
                        }}
                      />
                    </div>
                    <div
                      className={`timeseries-logmode ${
                        graphOption !== 1 ? 'disabled' : ''
                      }`}
                    >
                      <label htmlFor="timeseries-logmode">Logarithmic</label>
                      <input
                        type="checkbox"
                        checked={graphOption === 1 && timeseriesLogMode}
                        className="switch"
                        disabled={graphOption !== 1}
                        onChange={(event) => {
                          setTimeseriesLogMode(!timeseriesLogMode);
                        }}
                      />
                    </div>
                  </div>
                </div>
  
                <TimeSeries
                  timeseries={timeseries}
                  type={graphOption}
                  mode={timeseriesMode}
                  logMode={timeseriesLogMode}
                />
              </React.Fragment>
            )}
          </div>
  
          <div className="state-left">
            <div className="Clusters fadeInUp" style={{animationDelay: '0.8s'}}>
              <h1>Network of transmission</h1>
              <Clusters stateCode={stateCode} />
            </div>
          </div>
  
          <div className="state-right"></div>
        </div>
        <Footer />
      </React.Fragment>
    );
  }
  
  export default State;
  