import React, { useState } from "react";
import {
  AdditionAddress,
  AstricksMark,
  ButtonModeHere,
  CancelTextWithIcon,
  CompanyFacilityData,
  CompanyFacilityInnContainer,
  DataRowHere,
  DataRowTitle,
  DataRowValue,
  EditModeBoxContainer,
  EditSaveIcons,
  EditSaveIcons1,
  FooterDiv,
  PlushIcon,
  PlushIconBox,
  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,
  Grid,
  MenuItem,
  Select,
  TextField,
  Typography,
} from "@mui/material";
import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
import { LightTooltip } from "@/components/common/Tooltip/tooltip";

export default function ResellerRnDdepartment() {
  const [editMode, setEditMode] = useState(false);
  const [productlinename, setProductlinename] = useState("");
  const handleEditClick = () => {
    setEditMode(true);
  };
  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 && (
            <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>
          )}
        </ButtonModeHere>
      </SubHeadingPage>
      <CompanyFacilityData>
        {editMode ? (
          <EditModeBoxContainer>
            <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 </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{" "}
                            </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>
            <FooterDiv>
              <Divider variant="middle" />
            </FooterDiv>
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <PlushIconBox>
                  <LightTooltip
                    title="Add Another Store Details"
                    arrow
                    placement="left"
                  >
                    <PlushIcon>
                      <AddOutlinedIcon />
                    </PlushIcon>
                  </LightTooltip>
                </PlushIconBox>
              </Grid>
            </Grid>
          </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>
  );
}