import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Link } from "react-router-dom";
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Container";
import Box from "@material-ui/core/Box";
import InputBase from "@material-ui/core/InputBase";
import SearchIcon from "@material-ui/icons/Search";
import ProviderList from "./ProviderList";
import VolunteerInstructions from "./VolunteerInstructions";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
import { useLocation } from "react-router-dom";
import SocialDistanceNotice from "../../components/SocialDistanceNotice";

const useStyles = makeStyles((theme) => ({
  heroContent: {
    backgroundColor: theme.palette.background.paper,
    marginTop: theme.spacing(3),
    marginBottom: theme.spacing(3),
    padding: theme.spacing(2),
  },
  heroButtons: {
    margin: theme.spacing(4),
  },
  search: {
    position: "relative",
    borderRadius: theme.shape.borderRadius,
    marginLeft: 0,
    marginBottom: "1rem",
    width: "100%",
    [theme.breakpoints.up("sm")]: {
      marginLeft: theme.spacing(1),
      width: "auto",
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: "100%",
    position: "absolute",
    pointerEvents: "none",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  inputRoot: {
    color: "inherit",
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    transition: theme.transitions.create("width"),
    width: "100%",
    [theme.breakpoints.up("sm")]: {
      width: "12ch",
      "&:focus": {
        width: "20ch",
      },
    },
  },
  successText: {
    color: "#d50000",
    fontSize: 24,
  },
}));

const TOTAL_PROVIDERS = gql`
  query Providers(
    $first: Int
    $after: String
    $last: Int
    $before: String
    $city: String
  ) {
    providers(
      first: $first
      after: $after
      last: $last
      before: $before
      filters: { active: true, activeRequests: true, city: $city }
      orderBy: { direction: DESC, sort: ID }
    ) {
      totalCount
      pageInfo {
        hasNextPage
        hasPreviousPage
        startCursor
        endCursor
      }
      edges {
        cursor
        node {
          id
          firstName
          role
          facility
          neighborhood
          city
          state
          responseCount
          requests {
            type
            satisfied
          }
        }
      }
    }
  }
`;

export default function BrowseRequests({ minimal = false }) {
  const classes = useStyles();
  const [pageType, setPageType] = React.useState("forward");
  const [endCursor, setEndCursor] = React.useState("");
  const [startCursor, setStartCursor] = React.useState("");
  const [searchValue, setSearchValue] = React.useState("");

  const { search } = useLocation();
  const isSuccess = search.includes("success=true");
  const resultsPerPage = 20;

  const { loading, error, data } = useQuery(TOTAL_PROVIDERS, {
    variables: {
      first: pageType === "forward" ? resultsPerPage : null,
      after: pageType === "forward" ? endCursor : null,
      last: pageType === "back" ? resultsPerPage : null,
      before: pageType === "back" ? startCursor : null,
      city: searchValue,
    },
  });

  const pageNext = (endCursor) => {
    setPageType("forward");
    setEndCursor(endCursor);
  };

  const pagePrevious = (startCursor) => {
    setPageType("back");
    setStartCursor(startCursor);
  };

  const changeSearchValue = (e) => {
    setSearchValue(e.target.value);
  };

  return (
    <Box mb={6} mt={10}>
      {isSuccess && (
        <Container className={classes.heroContent}>
          <Box mb={4} textAlign="center">
            <Typography variant="h5" className={classes.successText}>
              Thank you so much for volunteering!
            </Typography>
            <Typography variant="subtitle1" className={classes.successText}>
              You should hear back from the medical provider soon.
            </Typography>
          </Box>
        </Container>
      )}
      {!minimal && <VolunteerInstructions />}
      <Container>
        <Box className={classes.search}>
          <div className={classes.searchIcon}>
            <SearchIcon />
          </div>
          <InputBase
            placeholder="Search by city..."
            classes={{
              root: classes.inputRoot,
              input: classes.inputInput,
            }}
            inputProps={{ "aria-label": "search by city" }}
            value={searchValue}
            onChange={changeSearchValue}
          />
        </Box>
      </Container>
      <ProviderList
        providers={(data && data.providers.edges) || []}
        pageInfo={data && data.providers.pageInfo}
        onNext={pageNext}
        onPrevious={pagePrevious}
      />
      <Box mt={6}>
        <SocialDistanceNotice />
      </Box>
    </Box>
  );
}