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 PredictSurvivalForm() {
  return (
    <Page title="Predict Survival Form">
      <ContentStyle sx={{ textAlign: "center", alignItems: "center" }}>
        <m.div>
          <Typography variant="h3" paragraph>
            Predict Survival
          </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 at Diadnosis" labelName="Select your age..." />
                <Textf
                  name="Type of Breast Surgery"
                  labelName="Select your type of breast surgery..."
                />
                <Textf
                  name="Cancer Type Surgery"
                  labelName="Select your type detailed..."
                />
                <Textf
                  name="Cellularity form"
                  labelName="Select cellularity..."
                />
                <Textf
                  name="Has chemotherapy been done?"
                  labelName="Select..."
                />
                <Textf name="ER status" labelName="Select ER status..." />
              </Grid>

              <Grid item sm={5}>
                <Textf name="HER2 Status" labelName="Select HER2 Status..." />
                <Textf
                  name="Has Hormone Therapy been done?"
                  labelName="Select..."
                />
                <Textf
                  name="Has Radio Therapy been done?"
                  labelName="Select..."
                />
                <Textf name="Sex" labelName="Select sex..." />
                <Textf name="Tumor Size" labelName="Select tumor size..." />
                <Textf name="Tumor Stage" labelName="Select tumor stage..." />
              </Grid>
            </Grid>
            <Box style={{ padding: "20px", textAlign: "center" }}>
              <Button
                variant="contained"
                href="#"
                style={{ textAlign: "center" }}
              >
                {" "}
                Predict Survial{" "}
              </Button>
            </Box>
          </Item>
        </Grid>
      </Grid>
      <Link href="#" underline="hover" color="error" padding={"0 0 50px 120px"}>
        <b>{"Result"} </b>
      </Link>
    </Page>
  );
}
