import React, { useState } from "react";
import {
  AstricksMark,
  ButtonModeHere,
  CancelTextWithIcon,
  CompanyFacilityData,
  CompanyFacilityInnContainer,
  DataRowHere,
  DataRowTitle,
  DataRowValue,
  EditModeBoxContainer,
  EditSaveIcons,
  EditSaveIcons1,
  FooterDiv,
  PlushIcon,
  PlushIconBox,
  Radiomain,
  SavebtnBox,
  SaveTextWithIcon,
  SubHeadingPage,
  TypographyTitle,
} from "../FactoryDetails/style";
import {
  Box,
  Divider,
  FormControl,
  FormControlLabel,
  Grid,
  MenuItem,
  Radio,
  RadioGroup,
  Select,
  TextField,
  Typography,
} from "@mui/material";
import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
import CloseIcon from "@mui/icons-material/Close";
import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
import { LightTooltip } from "@/components/common/Tooltip/tooltip";
import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
import { QualityControlPress } from "../FactoryDetails/qualitycontrolpress/QualityControlPress";

const ManufactureRnD = ({ editMode, setEditMode }) => {
  const [showData, setShowData] = useState(false);

  const handleRadioChange = (event) => {
    if (event.target.value === "yes") {
      setShowData(true);
    } else {
      setShowData(false);
    }
  };

  return (
    <>
      <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>
      {/* <QualityControlPress /> */}
    </>
  );
};

export default ManufactureRnD;