import React, { useState } from "react";
import {
  AdditionAddress,
  AstricksMark,
  ButtonModeHere,
  CancelTextWithIcon,
  CompanyFacilityData,
  CompanyFacilityInnContainer,
  DataRowHere,
  DataRowTitle,
  DataRowValue,
  EditModeBoxContainer,
  EditSaveIcons,
  EditSaveIcons1,
  FooterDiv,
  PlushIcon,
  PlushIconBox,
  Radiomain,
  SavebtnBox,
  SaveTextWithIcon,
  SubHeadingPage,
  TypographyTitle,
} from "./style";
import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
import CloseIcon from "@mui/icons-material/Close";
import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
import {
  Box,
  Divider,
  FormControl,
  FormControlLabel,
  Grid,
  MenuItem,
  Radio,
  RadioGroup,
  Select,
  TextField,
  Typography,
} from "@mui/material";
import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
import { LightTooltip } from "@/components/common/Tooltip/tooltip";
import * as Yup from "yup";
import { Form, Formik } from "formik";
export default function Manufacturer() {
  const [editMode, setEditMode] = useState(false);
  const [showData, setShowData] = useState(false);
  const [productlinename, setProductlinename] = useState("");
  const handleEditClick = () => {
    setEditMode(true);
  };
  const handleSaveClick = () => {
    setEditMode(false);
  };
  const handleRadioChange = (event) => {
    if (event.target.value === "yes") {
      setShowData(true);
    } else {
      setShowData(false);
    }
  };
  const [selectedValue, setSelectedValue] = useState("");
  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value);
  };
  const validationSchema = Yup.object({
    currency: Yup.string().required("Please select currency"),
    amount: Yup.string().required("Please enter amount"),
    range: Yup.string().required("Please enter range"),
    vitality: Yup.string().required("Please enter vitality"),
    patent_production: Yup.string().required("Please enter patent production"),
    certification_level: Yup.string().required(
      "Please enter certification level"
    ),
  });
  function createNewSection() {
    return {
      id: Date.now(),
      currency: "",
      amount: "",
      range: "",
      vitality: "",
      patent_production: "",
      certification_level: "",
    };
  }
  const [sections, setSections] = useState([createNewSection()]);
  const handleAddSection = () => {
    setSections([...sections, createNewSection()]);
  };
  const handleSaveSection = async (index) => {
    const sectionToSave = sections[index];
  };
  const mainHTML = sections?.map((section, index) => (
    <FormControl
      key={index}
      style={{ display: "flex", flexDirection: "column" }}
    >
      <Formik
        key={section.id}
        initialValues={section}
        validationSchema={validationSchema}
        onSubmit={(values) => handleSaveSection(values)}
      >
        {({ setFieldValue }) => (
          <Form>
            <CompanyFacilityInnContainer
              sx={{
                boxShadow: editMode ? "0px 2px 2px 0px #9FA2BF52" : "",
                padding: editMode ? "16px" : "",
              }}
            >
         
        
                <SubHeadingPage>
                  <TypographyTitle>R&D Department </TypographyTitle>
                  <ButtonModeHere>
                    {!editMode && (
                      <EditSaveIcons1 onClick={() => setEditMode(true)}>
                        <img src={"/assets/EditPencil.svg"} alt="editImage" />
                        <Typography>Edit</Typography>
                      </EditSaveIcons1>
                    )}
                    {editMode && (
                      <Box
                        sx={{
                          "& .MuiFormControlLabel-label": {
                            fontSize: "14px",
                            fontWeight: "400",
                          },
                        }}
                      >
                        <FormControl>
                          <RadioGroup
                            row
                            aria-labelledby="demo-row-radio-buttons-group-label"
                            name="row-radio-buttons-group"
                            value={showData ? "yes" : "no"}
                            onChange={handleRadioChange}
                          >
                            <FormControlLabel
                              value="yes"
                              control={
                                <Radio
                                  sx={{
                                    "& .MuiSvgIcon-root": {
                                      fontSize: "19px",
                                    },
                                    "&.Mui-checked": {
                                      color: "#d7282f",
                                    },
                                  }}
                                />
                              }
                              label="Yes"
                            />
                            <FormControlLabel
                              value="no"
                              control={
                                <Radio
                                  sx={{
                                    "& .MuiSvgIcon-root": {
                                      fontSize: "19px",
                                    },
                                    "&.Mui-checked": {
                                      color: "#d7282f",
                                    },
                                  }}
                                />
                              }
                              label="No"
                            />
                          </RadioGroup>
                        </FormControl>
                      </Box>
                    )}
                  </ButtonModeHere>
                </SubHeadingPage>
                <CompanyFacilityData>
                  {editMode ? (
                    <EditModeBoxContainer>
                      {showData && (
                        <Grid container spacing={2}>
                          <Grid item xs={12}>
                            <Grid container spacing={2}>
                              <Grid item xs={12} sm={12} md={6}>
                                <DataRowHere className="editview">
                                  <Grid
                                    container
                                    spacing={1}
                                    alignItems="center"
                                  >
                                    <Grid item xs={12} sm={12} md={4}>
                                      <DataRowTitle>
                                        <Typography>
                                          R&D Spending{" "}
                                          <AstricksMark> *</AstricksMark>{" "}
                                        </Typography>
                                      </DataRowTitle>
                                    </Grid>
                                    <Grid item xs={12} sm={4} md={3}>
                                      <DataRowValue>
                                        <FormControl fullWidth size="small">
                                          <Select
                                            labelId="demo-simple-select-label"
                                            id="demo-simple-select"
                                            // value={selectedValue}
                                            // onChange={handleSelectChange}
                                            displayEmpty
                                            renderValue={
                                              selectedValue !== ""
                                                ? undefined
                                                : () => "Select your state"
                                            }
                                          >
                                            <MenuItem value="">
                                              <em>None</em>
                                            </MenuItem>
                                            <MenuItem value={10}>Ten</MenuItem>
                                            <MenuItem value={20}>
                                              Twenty
                                            </MenuItem>
                                            <MenuItem value={30}>
                                              Thirty
                                            </MenuItem>
                                          </Select>
                                        </FormControl>
                                      </DataRowValue>
                                    </Grid>
                                    <Grid item xs={12} sm={4} md={2}>
                                      <DataRowValue>
                                        <TextField
                                          id="outlined-basic"
                                          placeholder="Enter equipment name"
                                          variant="outlined"
                                          size="small"
                                          fullWidth
                                          // value={factoryName}
                                          //onChange={(e) => setFactoryName(e.target.value)}
                                        />
                                      </DataRowValue>
                                    </Grid>
                                    <Grid item xs={12} sm={4} md={3}>
                                      <DataRowValue>
                                        <FormControl fullWidth size="small">
                                          <Select
                                            labelId="demo-simple-select-label"
                                            id="demo-simple-select"
                                            // value={selectedValue}
                                            // onChange={handleSelectChange}
                                            displayEmpty
                                            renderValue={
                                              selectedValue !== ""
                                                ? undefined
                                                : () => "Select your state"
                                            }
                                          >
                                            <MenuItem value="">
                                              <em>None</em>
                                            </MenuItem>
                                            <MenuItem value={10}>Ten</MenuItem>
                                            <MenuItem value={20}>
                                              Twenty
                                            </MenuItem>
                                            <MenuItem value={30}>
                                              Thirty
                                            </MenuItem>
                                          </Select>
                                        </FormControl>
                                      </DataRowValue>
                                    </Grid>
                                  </Grid>
                                </DataRowHere>
                              </Grid>
                              <Grid item xs={12} sm={12} md={6}>
                                <DataRowHere className="editview">
                                  <Grid
                                    container
                                    spacing={1}
                                    alignItems="center"
                                  >
                                    <Grid item xs={12} sm={12} md={4}>
                                      <DataRowTitle>
                                        <Typography>
                                          Vitality Index{" "}
                                          <AstricksMark>
                                            {" "}
                                            *
                                            <HelpOutlineOutlinedIcon />
                                          </AstricksMark>{" "}
                                        </Typography>
                                      </DataRowTitle>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={8}>
                                      <DataRowValue>
                                        <TextField
                                          id="outlined-basic"
                                          placeholder="Enter vitality index"
                                          variant="outlined"
                                          size="small"
                                          fullWidth
                                          // value={factoryName}
                                          //onChange={(e) => setFactoryName(e.target.value)}
                                        />
                                      </DataRowValue>
                                    </Grid>
                                  </Grid>
                                </DataRowHere>
                              </Grid>
                            </Grid>
                          </Grid>
                          <Grid item xs={12}>
                            <Grid container spacing={2}>
                              <Grid item xs={12} sm={12} md={6}>
                                <DataRowHere className="editview">
                                  <Grid
                                    container
                                    spacing={1}
                                    alignItems="center"
                                  >
                                    <Grid item xs={12} sm={12} md={4}>
                                      <DataRowTitle>
                                        <Typography>
                                          patent Production{" "}
                                          <AstricksMark>
                                            {" "}
                                            *
                                            <HelpOutlineOutlinedIcon />
                                          </AstricksMark>{" "}
                                        </Typography>
                                      </DataRowTitle>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={8}>
                                      <DataRowValue>
                                        <TextField
                                          id="outlined-basic"
                                          placeholder="Enter patent production"
                                          variant="outlined"
                                          size="small"
                                          fullWidth
                                          // value={factoryName}
                                          //onChange={(e) => setFactoryName(e.target.value)}
                                        />
                                      </DataRowValue>
                                    </Grid>
                                  </Grid>
                                </DataRowHere>
                              </Grid>
                              <Grid item xs={12} sm={12} md={6}>
                                <DataRowHere className="editview">
                                  <Grid
                                    container
                                    spacing={1}
                                    alignItems="center"
                                  >
                                    <Grid item xs={12} sm={12} md={4}>
                                      <DataRowTitle>
                                        <Typography>
                                          Certification Level of R&D Head{" "}
                                          <AstricksMark> *</AstricksMark>{" "}
                                        </Typography>
                                      </DataRowTitle>
                                    </Grid>
                                    <Grid item xs={12} sm={12} md={8}>
                                      <DataRowValue>
                                        <TextField
                                          id="outlined-basic"
                                          placeholder="Enter certification level of R&D head"
                                          variant="outlined"
                                          size="small"
                                          fullWidth
                                          // value={factoryName}
                                          //onChange={(e) => setFactoryName(e.target.value)}
                                        />
                                      </DataRowValue>
                                    </Grid>
                                  </Grid>
                                </DataRowHere>
                              </Grid>
                            </Grid>
                          </Grid>
                        </Grid>
                      )}
                      {showData && (
                        <>
                          <FooterDiv>
                            <Divider variant="middle" />
                          </FooterDiv>
                          <Radiomain>
                            <Grid container spacing={1}>
                              <Grid item xs={12}>
                                <SavebtnBox>
                                  {editMode && (
                                    <EditSaveIcons>
                                      <CancelTextWithIcon
                                        onClick={() => setEditMode(false)}
                                        className="cancelwithicon"
                                      >
                                        <CloseIcon />
                                        <Typography>Cancel</Typography>
                                      </CancelTextWithIcon>
                                      <SaveTextWithIcon
                                        className="savewithicon"
                                        onClick={handleSaveClick}
                                      >
                                        <SaveOutlinedIcon />
                                        <Typography variant="body1">
                                          Save
                                        </Typography>
                                      </SaveTextWithIcon>
                                    </EditSaveIcons>
                                  )}
                                </SavebtnBox>
                                <PlushIconBox
                                  onClick={() => handleAddSection()}
                                >
                                  <LightTooltip
                                    title="Add Another Store Details"
                                    arrow
                                    placement="left"
                                  >
                                    <PlushIcon>
                                      <AddOutlinedIcon />
                                    </PlushIcon>
                                  </LightTooltip>
                                </PlushIconBox>
                              </Grid>
                            </Grid>
                          </Radiomain>
                        </>
                      )}
                    </EditModeBoxContainer>
                  ) : (
                    <Box>
                      {/* <Grid container spacing={2}>
                        <Grid item xs={12}>
                          <Grid container spacing={2}>
                            <Grid item xs={12} sm={12} md={6}>
                              <DataRowHere>
                                <Grid container spacing={1}>
                                  <Grid item xs={12} sm={12} md={4}>
                                    <DataRowTitle>
                                      <Typography>R&D Spending</Typography>
                                    </DataRowTitle>
                                  </Grid>
                                  <Grid item xs={12} sm={12} md={8}>
                                    <DataRowValue>
                                      <Typography>$129 Million</Typography>
                                    </DataRowValue>            
                                  </Grid>
                                </Grid>
                              </DataRowHere>
                            </Grid>
                            <Grid item xs={12} sm={12} md={6}>
                              <DataRowHere>
                                <Grid container spacing={1}>
                                  <Grid item xs={12} sm={12} md={4}>
                                    <DataRowTitle>
                                      <Typography>Vitality Index</Typography>
                                    </DataRowTitle>
                                  </Grid>
                                  <Grid item xs={12} sm={12} md={8}>
                                    <DataRowValue>
                                      <Typography>Ibrahim Sameeh</Typography>
                                    </DataRowValue>
                                  </Grid>
                                </Grid>
                              </DataRowHere>
                            </Grid>
                          </Grid>
                        </Grid>
                        <Grid item xs={12}>
                          <Grid container spacing={2}></Grid>
                        </Grid>
                        <Grid item xs={12}>
                          <Grid container spacing={2}>
                            <Grid item xs={12} sm={12} md={6}>
                              <DataRowHere>
                                <Grid container spacing={1}>
                                  <Grid item xs={12} sm={12} md={4}>
                                    <DataRowTitle>
                                      <Typography>
                                        Certification Level of R&D Head
                                      </Typography>
                                    </DataRowTitle>
                                  </Grid>
                                  <Grid item xs={12} sm={12} md={8}>
                                    <DataRowValue>
                                      <Typography>Ibrahim Sameeh</Typography>
                                    </DataRowValue>
                                  </Grid>
                                </Grid>
                              </DataRowHere>
                            </Grid>
                            <Grid item xs={12} sm={12} md={6}>
                              <DataRowHere>
                                <Grid container spacing={1}>
                                  <Grid item xs={12} sm={12} md={4}>
                                    <DataRowTitle>
                                      <Typography>
                                        Certification Level of R&D Head
                                      </Typography>
                                    </DataRowTitle>
                                  </Grid>
                                  <Grid item xs={12} sm={12} md={8}>
                                    <DataRowValue>
                                      <Typography>Ibrahim Sameeh</Typography>
                                    </DataRowValue>
                                  </Grid>
                                </Grid>
                              </DataRowHere>
                            </Grid>
                          </Grid>
                        </Grid>
                      </Grid> */}
                    </Box>
                  )}
                </CompanyFacilityData>
          
            </CompanyFacilityInnContainer>
          </Form>
        )}
      </Formik>
    </FormControl>
  ));

  return <>{mainHTML}</>;
}