import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { useParams } from "react-router-dom";
import styled from "styled-components";
import { useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";
import Badge from "../molecules/Badge";
import Spinner from "../atoms/Spinner";

const Container = styled.div`
  box-sizing: border-box;
  width: 100%;
`;

const LongDescription = styled.p`
  font-family: Muli;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  margin: 0px 28px;
  margin-bottom: 120px;
  color: ${({ theme }) => theme.titleText};
`;

const SpecialText = styled.p`
  font-family: Muli;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  margin-left: 28px;
  margin-right: 28px;
  margin-bottom: 120px;
  color: ${({ theme }) => theme.titleText};
`;

const Title = styled.h2`
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  line-height: 30px;
  color: ${({ theme }) => theme.titleText};
  margin: 0;
  padding-top: 20px;
`;

const ButtonContainer = styled.div`
  font-family: Muli;

  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
`;

const SpinnerContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`;

const LocationButton = styled.button`
  outline: none;
  border: none;
  font-family: Muli;

  font-size: 18px;
  color: #ffffff;
  // font-weight: 600;
  padding: 9px 14px;
  width: 156px;

  border: 0.5px solid #336b68;
  box-sizing: border-box;
  border-radius: 5px;

  background: #336b68;
  margin-bottom: 48px;
  cursor: pointer;
`;

export const GET_MATERIAL = gql`
  query getMaterial($materialId: Int!) {
    material(id: $materialId) {
      material_id
      description
      long_description
      bin_trash
      bin_recycle
      bin_compost
      dropoff
      pickup
      notes
    }
  }
`;

function getTypeString(recycle, compost, landfill) {
  if (recycle) return "recycle";
  if (compost) return "compost";
  if (landfill) return "landfill";
  return "offsite";
}

const MaterialPage = () => {
  const history = useHistory();
  const { materialId } = useParams();

  const matInfo = useQuery(GET_MATERIAL, {
    variables: {
      materialId: parseInt(materialId)
    }
  });
  const [material, setMaterial] = useState({
    description: "",
    long_description: "",
    bin_trash: false,
    bin_recycle: false,
    bin_compost: false,
    dropoff: null,
    pickup: null,
    notes: null
  });

  useEffect(() => {
    if (matInfo.data && !matInfo.loading) {
      setMaterial(matInfo.data.material);
    }
  }, [matInfo.data]);

  if (matInfo.loading)
    return (
      <SpinnerContainer>
        <Spinner />
      </SpinnerContainer>
    );

  return (
    <Container>
      <Title>{material.description}</Title>
      <Badge
        type={getTypeString(
          material.bin_recycle,
          material.bin_compost,
          material.bin_trash
        )}
      />
      <ButtonContainer>
        <LocationButton
          onClick={() => history.push(`/material/${materialId}/locations`)}
        >
          Locate Centers
        </LocationButton>
      </ButtonContainer>
      <LongDescription>{material.long_description}</LongDescription>

      <SpecialText>{material.notes}</SpecialText>
    </Container>
  );
};

export default MaterialPage;