import React, { useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { ValidatorForm, TextValidator } from "react-material-ui-form-validator";
import {
  Avatar,
  Box,
  Button,
  Card,
  CircularProgress,
  FormControl,
  Grid,
  InputLabel,
  MenuItem,
  Select,
  styled,
} from "@mui/material";
import UserGuestsService from "../services/istar/UserGuestsService";
import CompanyUserService from "../services/istar/CompanyUserService";
import { usaStates } from "./usaStates";

const TextField = styled(TextValidator)(() => ({
  width: "100%",
  marginBottom: "10px",
}));

const FlexBox = styled(Box)(() => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
}));

const StyledProgress = styled(CircularProgress)(() => ({
  position: "absolute",
  top: "6px",
  left: "25px",
}));

const Details = () => {
  const navigate = useNavigate();
  const params = useParams();
  const location = useLocation();
  const [isLoading, setIsLoading] = React.useState(false);
  // console.log("LOCAOIN: ", location);

  const [state, setState] = useState({
    gender: "male",
    addState: null,
    country: "Australia",
    yearOfBirth: 2000,
  });
  const [company, setCompany] = React.useState(location?.state?.company);

  // React.useEffect(() => {
  //   CompanyUserService.getSingleRecord(params.id).then((res) => {
  //     console.log("RES: ", res);
  //   });
  // }, []);

  const handleSubmit = async (event) => {
    console.log("STATE: ", state);
    setIsLoading(true);
    UserGuestsService.addCustomer({
      ...state,
      state: addState,
      companyId: params?.id,
    })
      .then((res) => {
        console.log(res);
        navigate(`/${params?.id}/questions`, {
          state: { customerId: res._id, company: company },
        });
      })
      .catch((err) => {
        console.log("Error in adding customer", err);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  const handleChange = (event) => {
    event.preventDefault();
    setState({
      ...state,
      [event.target.name]: event.target.value,
    });
  };
  const {
    firstName,
    lastName,
    email,
    address,
    gender,
    addState,
    phone,
    yearOfBirth,
    country,
  } = state;

  // if (isLoading) {
  //   return (
  //     <Grid
  //       container
  //       direction="row"
  //       justifyContent="center"
  //       alignItems="center"
  //     >
  //       <Box sx={{ display: "flex" }}>
  //         <CircularProgress />
  //       </Box>
  //     </Grid>
  //   );
  // }

  return (
    <div style={{ margin: "0 0 0 0" }}>
      <Card sx={{ px: 3, py: 2, mb: 3 }}>
        <Grid
          container
          direction="column"
          justifyContent="center"
          alignItems="center"
          // spacing={2}
        >
          <h2>User Detail</h2>
          <Avatar
            src={company?.logo}
            alt={company?.name}
            style={{ marginBottom: "1rem", width: 100, height: 100 }}
          />
        </Grid>
        <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
          <Grid container spacing={2}>
            <Grid item lg={12} md={12} sm={12} xs={12}>
              <TextField
                label="First Name*"
                onChange={handleChange}
                type="text"
                name="firstName"
                size="small"
                variant="outlined"
                value={firstName || ""}
                validators={["required"]}
                errorMessages={["First Name is required"]}
              />
            </Grid>
            <Grid item lg={12} md={12} sm={12} xs={12}>
              <TextField
                label="Last Name*"
                onChange={handleChange}
                type="text"
                name="lastName"
                size="small"
                variant="outlined"
                value={lastName || ""}
                validators={["required"]}
                errorMessages={["Last Name is required"]}
              />
            </Grid>
            <Grid item lg={12} md={12} sm={12} xs={12}>
              <FormControl fullWidth>
                <InputLabel size="small" id="demo-simple-select-label">
                  Gender*
                </InputLabel>
                <Select
                  fullWidth
                  style={{ marginBottom: "10px" }}
                  size="small"
                  labelId="demo-simple-select-label"
                  id="demo-simple-select"
                  value={gender}
                  label="Gender*"
                  onChange={(e) => {
                    setState({
                      ...state,
                      gender: e.target.value,
                    });
                  }}
                >
                  <MenuItem value="male">Male</MenuItem>
                  <MenuItem value="female">Female</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item lg={12} md={12} sm={12} xs={12}>
              <TextField
                label="Email*"
                onChange={handleChange}
                type="text"
                name="email"
                size="small"
                variant="outlined"
                value={email || ""}
                validators={["required"]}
                errorMessages={["Email is required"]}
              />
            </Grid>
            <Grid item lg={12} md={12} sm={12} xs={12}>
              <TextField
                label="Phone*"
                onChange={handleChange}
                type="text"
                name="phone"
                size="small"
                variant="outlined"
                value={phone || ""}
                validators={["required"]}
                errorMessages={["Phone Number is required"]}
              />
            </Grid>
            {/* <Grid item lg={12} md={12} sm={12} xs={12}>
              <TextField
                label="Year Of Birth"
                onChange={handleChange}
                type="text"
                name="yearOfBirth"
                size="small"
                variant="outlined"
                value={yearOfBirth || ""}
                validators={["required"]}
                errorMessages={["Year Of Birth is required"]}
              />
            </Grid> */}
            <Grid item lg={12} md={12} sm={12} xs={12}>
              <FormControl fullWidth>
                <InputLabel size="small" id="demo-simple-select-label">
                  Year of Birth*
                </InputLabel>
                <Select
                  style={{ marginBottom: "10px" }}
                  size="small"
                  labelId="demo-simple-select-label"
                  id="demo-simple-select"
                  value={yearOfBirth}
                  label="Year of Birth*"
                  onChange={(e) => {
                    setState({
                      ...state,
                      yearOfBirth: e.target.value,
                    });
                  }}
                >
                  <MenuItem value={1930}>1930</MenuItem>
                  <MenuItem value={1931}>1931</MenuItem>
                  <MenuItem value={1932}>1932</MenuItem>
                  <MenuItem value={1933}>1933</MenuItem>
                  <MenuItem value={1934}>1934</MenuItem>
                  <MenuItem value={1935}>1935</MenuItem>
                  <MenuItem value={1936}>1936</MenuItem>
                  <MenuItem value={1937}>1937</MenuItem>
                  <MenuItem value={1938}>1938</MenuItem>
                  <MenuItem value={1939}>1939</MenuItem>
                  <MenuItem value={1940}>1940</MenuItem>
                  <MenuItem value={1941}>1941</MenuItem>
                  <MenuItem value={1942}>1942</MenuItem>
                  <MenuItem value={1943}>1943</MenuItem>
                  <MenuItem value={1944}>1944</MenuItem>
                  <MenuItem value={1945}>1945</MenuItem>
                  <MenuItem value={1946}>1946</MenuItem>
                  <MenuItem value={1947}>1947</MenuItem>
                  <MenuItem value={1948}>1948</MenuItem>
                  <MenuItem value={1949}>1949</MenuItem>
                  <MenuItem value={1950}>1950</MenuItem>
                  <MenuItem value={1951}>1951</MenuItem>
                  <MenuItem value={1952}>1952</MenuItem>
                  <MenuItem value={1953}>1953</MenuItem>
                  <MenuItem value={1954}>1954</MenuItem>
                  <MenuItem value={1955}>1955</MenuItem>
                  <MenuItem value={1956}>1956</MenuItem>
                  <MenuItem value={1957}>1957</MenuItem>
                  <MenuItem value={1958}>1958</MenuItem>
                  <MenuItem value={1959}>1959</MenuItem>
                  <MenuItem value={1960}>1960</MenuItem>
                  <MenuItem value={1961}>1961</MenuItem>
                  <MenuItem value={1962}>1962</MenuItem>
                  <MenuItem value={1963}>1963</MenuItem>
                  <MenuItem value={1964}>1964</MenuItem>
                  <MenuItem value={1965}>1965</MenuItem>
                  <MenuItem value={1966}>1966</MenuItem>
                  <MenuItem value={1967}>1967</MenuItem>
                  <MenuItem value={1968}>1968</MenuItem>
                  <MenuItem value={1969}>1969</MenuItem>
                  <MenuItem value={1970}>1970</MenuItem>
                  <MenuItem value={1971}>1971</MenuItem>
                  <MenuItem value={1972}>1972</MenuItem>
                  <MenuItem value={1973}>1973</MenuItem>
                  <MenuItem value={1974}>1974</MenuItem>
                  <MenuItem value={1975}>1975</MenuItem>
                  <MenuItem value={1976}>1976</MenuItem>
                  <MenuItem value={1977}>1977</MenuItem>
                  <MenuItem value={1978}>1978</MenuItem>
                  <MenuItem value={1979}>1979</MenuItem>
                  <MenuItem value={1980}>1980</MenuItem>
                  <MenuItem value={1981}>1981</MenuItem>
                  <MenuItem value={1982}>1982</MenuItem>
                  <MenuItem value={1983}>1983</MenuItem>
                  <MenuItem value={1984}>1984</MenuItem>
                  <MenuItem value={1985}>1985</MenuItem>
                  <MenuItem value={1986}>1986</MenuItem>
                  <MenuItem value={1987}>1987</MenuItem>
                  <MenuItem value={1988}>1988</MenuItem>
                  <MenuItem value={1989}>1989</MenuItem>
                  <MenuItem value={1990}>1990</MenuItem>
                  <MenuItem value={1991}>1991</MenuItem>
                  <MenuItem value={1992}>1992</MenuItem>
                  <MenuItem value={1993}>1993</MenuItem>
                  <MenuItem value={1994}>1994</MenuItem>
                  <MenuItem value={1995}>1995</MenuItem>
                  <MenuItem value={1996}>1996</MenuItem>
                  <MenuItem value={1997}>1997</MenuItem>
                  <MenuItem value={1998}>1998</MenuItem>
                  <MenuItem value={1999}>1999</MenuItem>
                  <MenuItem value={2000}>2000</MenuItem>
                  <MenuItem value={2001}>2001</MenuItem>
                  <MenuItem value={2002}>2002</MenuItem>
                  <MenuItem value={2003}>2003</MenuItem>
                  <MenuItem value={2004}>2004</MenuItem>
                  <MenuItem value={2005}>2005</MenuItem>
                  <MenuItem value={2006}>2006</MenuItem>
                  <MenuItem value={2007}>2007</MenuItem>
                  <MenuItem value={2008}>2008</MenuItem>
                  <MenuItem value={2009}>2009</MenuItem>
                  <MenuItem value={2010}>2010</MenuItem>
                  <MenuItem value={2011}>2011</MenuItem>
                  <MenuItem value={2012}>2012</MenuItem>
                  <MenuItem value={2013}>2013</MenuItem>
                  <MenuItem value={2014}>2014</MenuItem>
                  <MenuItem value={2015}>2015</MenuItem>
                  <MenuItem value={2016}>2016</MenuItem>
                  <MenuItem value={2017}>2017</MenuItem>
                  <MenuItem value={2018}>2018</MenuItem>
                  <MenuItem value={2019}>2019</MenuItem>
                  <MenuItem value={2020}>2020</MenuItem>
                  <MenuItem value={2021}>2021</MenuItem>
                  <MenuItem value={2022}>2022</MenuItem>
                  <MenuItem value={2023}>2023</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item lg={12} md={12} sm={12} xs={12}>
              <FormControl fullWidth>
                <InputLabel size="small" id="demo-simple-select-label">
                  Country*
                </InputLabel>
                <Select
                  style={{ marginBottom: "10px" }}
                  size="small"
                  labelId="demo-simple-select-label"
                  id="demo-simple-select"
                  value={country}
                  label="Country*"
                  onChange={(e) => {
                    setState({
                      ...state,
                      country: e.target.value,
                    });
                  }}
                >
                  <MenuItem value="Australia">Australia</MenuItem>
                  <MenuItem value="USA">United States</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item lg={12} md={12} sm={12} xs={12}>
              <FormControl fullWidth>
                <InputLabel size="small" id="demo-simple-select-label">
                  State*
                </InputLabel>
                {state.country === "Australia" ? (
                  <Select
                    style={{ marginBottom: "10px" }}
                    size="small"
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value={addState}
                    label="State*"
                    onChange={(e) => {
                      setState({
                        ...state,
                        addState: e.target.value,
                      });
                    }}
                  >
                    <MenuItem value="New South Wales">New South Wales</MenuItem>
                    <MenuItem value="Victoria">Victoria</MenuItem>
                    <MenuItem value="Queensland">Queensland</MenuItem>
                    <MenuItem value="Western Australia">
                      Western Australia
                    </MenuItem>
                    <MenuItem value="South Australia">South Australia</MenuItem>
                    <MenuItem value="Tasmania">Tasmania</MenuItem>
                  </Select>
                ) : (
                  <Select
                    style={{ marginBottom: "10px" }}
                    size="small"
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value={addState}
                    label="State"
                    onChange={(e) => {
                      setState({
                        ...state,
                        addState: e.target.value,
                      });
                    }}
                  >
                    {usaStates.map((us) => (
                      <MenuItem value={us}>{us}</MenuItem>
                    ))}
                  </Select>
                )}
              </FormControl>
            </Grid>
          </Grid>

          <FlexBox mb={2} flexWrap="wrap">
            {isLoading && (
              <Grid
                container
                direction="row"
                justifyContent="center"
                alignItems="center"
              >
                <Box sx={{ display: "flex" }}>
                  <CircularProgress />
                </Box>
              </Grid>
            )}
            <Button
              fullWidth
              variant="contained"
              disabled={isLoading}
              style={{
                marginTop: "1.5rem",
                backgroundColor: "#6F1EBC",
                width: "15rem",
                height: "2rem",
                padding: "1.5rem",
              }}
              type="submit"
            >
              Continue
            </Button>
          </FlexBox>
        </ValidatorForm>
      </Card>
    </div>
  );
};

export default Details;
