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";

export default function RetailerRnDdepartment() {
  const [editMode, setEditMode] = useState(false);
  const [showData, setShowData] = useState(false);
  const [productlinename, setProductlinename] = useState("");
  const handleEditClick = () => {
    setEditMode(true);
  };
  const handleRadioChange = (event) => {
    if (event.target.value === "yes") {
      setShowData(true);
    } else {
      setShowData(false);
    }
  };
  const handleSaveClick = () => {
    setEditMode(false);
  };
  const [selectedValue, setSelectedValue] = useState("");
  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value);
  };
  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"} // Controlled component
                    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}>
                        <DataRowHere className="editview">
                          <Grid container spacing={1} alignItems="center">
                            <Grid item xs={12} sm={12} md={2}>
                              <DataRowTitle>
                                <Typography>
                                  Certification Level of R&D Head
                                  <AstricksMark> *</AstricksMark>{" "}
                                </Typography>
                              </DataRowTitle>
                            </Grid>
                            <Grid item xs={12} sm={12} md={10}>
                              <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>
                  </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>
                          <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 item xs={12} sm={12} md={12}>
                      <DataRowHere>
                        <Grid container spacing={1}>
                          <Grid item xs={12} sm={12} md={2}>
                            <DataRowTitle>
                              <Typography>
                                Certification Level of R&D Head
                              </Typography>
                            </DataRowTitle>
                          </Grid>
                          <Grid item xs={12} sm={12} md={10}>
                            <DataRowValue>
                              <Typography>Ibrahim Sameeh</Typography>
                            </DataRowValue>
                          </Grid>
                        </Grid>
                      </DataRowHere>
                    </Grid>
                  </Grid>
                </Grid>
              </Grid>
            </Box>
          )}
        </CompanyFacilityData>
    
    </CompanyFacilityInnContainer>
  );
}