import { m } from "framer-motion";
import * as React from "react";
// @mui
import { styled } from "@mui/material/styles";
import { Box, Button, Typography } from "@mui/material";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import TextField from "@mui/material/TextField";
import Link from "@mui/material/Link";
// components
import Page from "../components/Page";

// ----------------------------------------------------------------------
const ContentStyle = styled("div")(({ theme }) => ({
  maxWidth: "100%",
  display: "flex",
  justifyContent: "center",
  flexDirection: "column",
  padding: theme.spacing(6, 0, 3, 0),
}));

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#F1F1F1",
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "left",
  color: theme.palette.text.secondary,
}));

function Textf(props) {
  return (
    <Box>
      <h3 style={{ paddingTop: "20px" }}>{props.name}</h3>
      <TextField
        fullWidth
        id="outlined-select-risk"
        select
        label={props.labelName}
        color="secondary"
        style={{ backgroundColor: "white" }}
      ></TextField>
    </Box>
  );
}

// ----------------------------------------------------------------------

export default function CalculateRiskForm() {
  return (
    <Page title="Calculate Risk Form">
      <ContentStyle sx={{ textAlign: "center", alignItems: "center" }}>
        <m.div>
          <Typography variant="h3" paragraph>
            Calculate Risk Level
          </Typography>
        </m.div>
      </ContentStyle>

      <Grid
        container
        direction="row"
        justifyContent="space-around"
        alignItems="flex-start"
        style={{ paddingBottom: "40px" }}
      >
        <Grid item sm={10}>
          <Item>
            <Grid
              container
              direction="row"
              justifyContent="space-around"
              alignItems="flex-start"
            >
              <Grid item sm={5} style={{ paddingBottom: "20px" }}>
                <Textf name="Age Group" labelName="Select your age group" />
                <Textf
                  name="Race/Ethicity"
                  labelName="Select your age race..."
                />
                <Textf
                  name="History of breast cancer in a first degree relative"
                  labelName="Select your history"
                />
                <Textf
                  name="Age (years) at menarche"
                  labelName="Select your age..."
                />
                <Textf
                  name="Age (years) at first birth"
                  labelName="Select your age..."
                />
                <Textf
                  name="BI-RADS breast density"
                  labelName="Select your breast density..."
                />
              </Grid>

              <Grid item sm={5}>
                <Textf
                  name="Use of hormone replacement therapy"
                  labelName="Select value..."
                />
                <Textf
                  name="Monopausal status"
                  labelName="Select your monopausal status..."
                />
                <Textf name="BMI Group" labelName="Select your BMI Group" />
                <Textf
                  name="Previous breast biopsy or aspiration"
                  labelName="Select your status..."
                />
                <Textf
                  name="Prior breast cancer diagnosis"
                  labelName="Select your status..."
                />

                <Box style={{ padding: "40px", textAlign: "center" }}>
                  <Button
                    variant="contained"
                    href="#"
                    style={{ textAlign: "center" }}
                  >
                    {" "}
                    Calculate Risk Level{" "}
                  </Button>
                </Box>
              </Grid>
            </Grid>
          </Item>
        </Grid>
      </Grid>
      <Link href="#" underline="hover" color="error" padding={"0 0 50px 120px"}>
        <b>{"Result"} </b>
      </Link>
    </Page>
  );
}
