import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import WebsiteChart from './charts/WebsiteChart';
import RankingsChart from './charts/RankingsChart';
import WorldMap from './common/WorldMap';
import Page from './layout/Page';
import { getDateRange } from 'lib/date';
import { get } from 'lib/web';
import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';
import styles from './WebsiteDetails.module.css';
import PageHeader from './layout/PageHeader';
import MenuLayout from './layout/MenuLayout';

const pageviewClasses = 'col-md-12 col-lg-6';
const sessionClasses = 'col-12 col-lg-4';
const menuOptions = ['Pages', 'Referrers', 'Browsers', 'Operating system', 'Devices', 'Countries'];

export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
  const [data, setData] = useState();
  const [chartLoaded, setChartLoaded] = useState(false);
  const [countryData, setCountryData] = useState();
  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
  const [expand, setExpand] = useState();
  const { startDate, endDate } = dateRange;

  async function loadData() {
    setData(await get(`/api/website/${websiteId}`));
  }

  function handleDataLoad() {
    if (!chartLoaded) setTimeout(() => setChartLoaded(true), 300);
  }

  function handleDateChange(values) {
    setTimeout(() => setDateRange(values), 300);
  }

  function handleExpand(title) {
    setExpand(title);
  }

  function handleMenuSelect(title) {
    setExpand(title);
  }

  useEffect(() => {
    if (websiteId) {
      loadData();
    }
  }, [websiteId]);

  if (!data) {
    return null;
  }

  return (
    <Page>
      <div className="row">
        <div className={classNames(styles.chart, 'col')}>
          <PageHeader>{data.name}</PageHeader>
          <WebsiteChart
            websiteId={websiteId}
            onDataLoad={handleDataLoad}
            onDateChange={handleDateChange}
            stickyHeader
          />
        </div>
      </div>
      {chartLoaded && !expand && (
        <>
          <div className={classNames(styles.row, 'row')}>
            <div className={pageviewClasses}>
              <RankingsChart
                title="Pages"
                type="url"
                heading="Views"
                websiteId={websiteId}
                startDate={startDate}
                endDate={endDate}
                dataFilter={urlFilter}
                onExpand={handleExpand}
              />
            </div>
            <div className={pageviewClasses}>
              <RankingsChart
                title="Referrers"
                type="referrer"
                heading="Views"
                websiteId={websiteId}
                startDate={startDate}
                endDate={endDate}
                dataFilter={refFilter(data.domain)}
                onExpand={handleExpand}
              />
            </div>
          </div>
          <div className={classNames(styles.row, 'row')}>
            <div className={sessionClasses}>
              <RankingsChart
                title="Browsers"
                type="browser"
                heading="Visitors"
                websiteId={websiteId}
                startDate={startDate}
                endDate={endDate}
                dataFilter={browserFilter}
                onExpand={handleExpand}
              />
            </div>
            <div className={sessionClasses}>
              <RankingsChart
                title="Operating system"
                type="os"
                heading="Visitors"
                websiteId={websiteId}
                startDate={startDate}
                endDate={endDate}
                onExpand={handleExpand}
              />
            </div>
            <div className={sessionClasses}>
              <RankingsChart
                title="Devices"
                type="device"
                heading="Visitors"
                websiteId={websiteId}
                startDate={startDate}
                endDate={endDate}
                dataFilter={deviceFilter}
                onExpand={handleExpand}
              />
            </div>
          </div>
          <div className={classNames(styles.row, 'row')}>
            <div className="col-12 col-md-12 col-lg-8">
              <WorldMap data={countryData} />
            </div>
            <div className="col-12 col-md-12 col-lg-4">
              <RankingsChart
                title="Countries"
                type="country"
                heading="Visitors"
                websiteId={websiteId}
                startDate={startDate}
                endDate={endDate}
                dataFilter={countryFilter}
                onDataLoad={data => setCountryData(data)}
                onExpand={handleExpand}
              />
            </div>
          </div>
        </>
      )}
      {expand && (
        <MenuLayout
          className={styles.expand}
          menuClassName={styles.menu}
          menu={menuOptions}
          selectedOption={expand}
          onMenuSelect={handleMenuSelect}
        />
      )}
    </Page>
  );
}