import { LineChart, Line, XAxis, ResponsiveContainer } from "recharts";
import styled, { css, useTheme } from "styled-components";
import * as gtag from "lib/gtag";
import { SyntheticEvent } from "react";

const StyledLocationBar = styled.div<{ opened?: boolean }>`
  ${({ theme, opened }) => css`
    font-size: 2.1em;
    background: white;
    padding: 0.2em 0.6em 0.2em;
    margin: 5px 0 !important;

    justify-content: space-between;
    transition: 0.3s ease;
    ${!opened &&
    css`
      :hover {
        background: #bee1dd;
        cursor: pointer;
      }
    `}

    .head {
      display: flex;
      cursor: pointer;
    }

    .stats {
      padding: 6px 0;
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
    .name {
      color: ${theme.teal};
      white-space: nowrap;
    }
    .num-cases {
      color: ${theme.teal};
      font-weight: bold;
      margin: 0 10px;
      text-align: right;
    }
    small {
      display: inline-block;
      background: ${theme.green};
      font-size: 0.8em;
      font-weight: bold;
      color: white;
      padding: 0.15em 0.3em;
      border-radius: 0.3em;
      text-align: right;
      position: relative;
      top: -3px;
      line-height: 1;
    }
    .details {
      text-align: center;
      padding: 0 0.5em 1em;
    }
    .dhb-link {
      font-size: 0.7em;
    }
    hr:first-child {
      margin-top: 0;
    }
  `}
`;

const InlineChart = styled.div`
  width: 42%;
  height: 50px;
`;

const CaseCounts = styled.div`
  ${({ theme }) => css`
    color: ${theme.navy};
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
    }
    li {
      display: inline-flex;
      align-items: center;
      margin-right: 0.8em;
      font-size: 0.8em;
      :nth-child(1) img {
        height: 1.05em;
      }
      :nth-child(2) img {
        height: 0.85em;
      }
    }
    img {
      height: 1em;
      margin-right: 0.3em;
    }
  `}
`;

const LocationBar = ({
  location,
  history,
  onClick,
}: {
  location: any;
  history: any;
  onClick?: (event: MouseEvent) => void;
}) => {
  const theme = useTheme();
  if (!location || !history) {
    return <div />;
  }

  return (
    <StyledLocationBar>
      <div
        className="head"
        onClick={() => {
          if (onClick) {
            onClick(location.name);
            gtag.event("View location", "", location.name);
          }
        }}
      >
        <div className="stats">
          <div>
            <span className="name">{location.name}</span>
            <CaseCounts>
              <ul>
                <li>
                  <img src={require(`../public/active.svg`)} />{" "}
                  {location.totalCases}
                </li>
                <li>
                  <img src={require(`../public/recovered.svg`)} />{" "}
                  {location.recovered}
                </li>
                <li>
                  <img src={require(`../public/deaths.svg`)} />{" "}
                  {location.deaths}
                </li>
              </ul>
            </CaseCounts>
          </div>
          <div className="num-cases">
            <div className="total-cases">{location.active}</div>
            {location.newCases > 0 && <small>+{location.newCases}</small>}
          </div>
        </div>

        <InlineChart>
          <ResponsiveContainer>
            <LineChart data={history}>
              <XAxis dataKey="date" hide />
              <Line
                type="monotone"
                dataKey="new"
                stroke={theme.teal}
                strokeWidth={1}
                dot={false}
                isAnimationActive={false}
              />
            </LineChart>
          </ResponsiveContainer>
        </InlineChart>
      </div>
    </StyledLocationBar>
  );
};

export default LocationBar;