import React, {useEffect, useState} from "react";
import { Modal, ModalBody, Row, Col } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import phoneIcon from "./../../assets/img/phone_icon.svg";
import image from "./../../assets/img/image.png";
import emailUserProfileIcon from "./../../assets/img/email_userprofile.svg";
import polygonYellowIcon from "./../../assets/img/Polygon_yellow.svg";
import polygonRedIcon from "./../../assets/img/Polygon_red.svg";
import "./../../assets/css/Profile.css";
import TruckIcon from "./../../assets/img/truck_icon.svg";
import LocationTracker from "../LocationTracking/LocationTracker";
import Autocomplete from '@mui/material/Autocomplete';
import { TextField } from "@mui/material";
import { useAppData } from "../../context/AppDataContext";



const SettingsPage = ({ show, setShowModel, selectedItem }) => {
  const handleClose = () => {
    setShowModel(false);
  };

  const [openTracker, setOpenTracker] = useState(false);
  const handleCloseTracker = () => setOpenTracker(false);
  const handleOpenTracker = () => setOpenTracker(true);
  const [shipmentOptions, setShipmentOptions] = useState([])
  const  appData  = useAppData(); 
  const [value, setValue] = React.useState('');
  const [shipmentDetails, setShipmentDetails] = useState([]);
  const [indexTracker, setIndexTracker] = useState('');
  const [check, setCheck] = useState(false);

  console.log("appData inside profile page", appData);

  useEffect(() => {        
    setShipmentDetails(appData.shipmentDataResponse);
         
  },[shipmentDetails]);

  useEffect(() => {
    const tempShipmentOptions = appData.shipmentDataResponse.map((d, i) => {            
      return {
        id: i + 1,
        label: d?.additionalInformation?.lastReportedTracker,
      };
    });
    setShipmentOptions ([
      ...tempShipmentOptions,
      { id: 0, label: ''}
    ]);

  }, [shipmentDetails]);

  useEffect(() =>{
    setCheck(true);
  }, [indexTracker]);  

  return (
    <Modal
      show={show}
      onHide={handleClose}
      backdrop="static"
      keyboard={false}
      dialogClassName="modal-width"
      contentClassName="modal-height"
      centered
      style={{ fontFamily: "arial" }}
    >
      {selectedItem === "settings" && (
        <>
          <Modal.Header
            closeButton
            style={{ border: "none" }}
            className="me-2 mt-1"
          >
            <Modal.Title
              className="ms-3 mt-1 modalTitle"
              // style={{ fontSize: "18px", fontWeight: "600" }}
            >
              Settings
            </Modal.Title>
          </Modal.Header>

          <ModalBody>
            <div className="ms-3 radio-group ">
              <div className="row " style={{ marginBottom: "30px" }}>
                <p style={{ marginBottom: "12px", padding: "0 8px" }}>
                  Temperature
                </p>
                <div className="leftlabel">
                  <input
                    type="radio"
                    id="celsius"
                    name="temperature"
                    value="celsius"
                    checked
                  />
                  <label for="celsius"> Celsius</label>
                </div>
                <div className="rightlabel">
                  <input
                    type="radio"
                    id="fahrenheit"
                    name="temperature"
                    value="fahrenheit"
                  />
                  <label for="fahrenheit"> Fahrenheit</label>
                </div>
              </div>
            </div>
            <div className="ms-3 my-3 radio-group ">
              <div className="row" style={{ marginBottom: "30px" }}>
                <p style={{ marginBottom: "12px", padding: "0 8px" }}>
                  Date Format
                </p>
                <div className="leftlabel">
                  <input
                    type="radio"
                    id="date"
                    name="date"
                    value="date"
                    checked
                  />
                  <label for="date"> MM/DD/YYYY</label>
                </div>
                <div className="rightlabel">
                  <input type="radio" id="date" name="date" value="date" />
                  <label for="date">DD/MM/YYYY</label>
                </div>
              </div>
            </div>
            <div
              className="ms-3 mt-3 radio-group "
              style={{ marginBottom: "30px" }}
            >
              <div className="row">
                <p style={{ marginBottom: "12px", padding: "0 8px" }}>
                  Time Format
                </p>
                <div className="leftlabel">
                  <input
                    type="radio"
                    id="time"
                    name="time"
                    value="time"
                    checked
                  />
                  <label for="time"> 12 hours(AM/PM)</label>
                </div>
                <div className="rightlabel">
                  <input type="radio" id="time" name="time" value="time" />
                  <label for="time"> 24 hours</label>
                </div>
              </div>
            </div>
          </ModalBody>
        </>
      )}
      {selectedItem === "viewprofile" && (
        <>
          <Modal.Header
            closeButton
            style={{ border: "none" }}
            className="me-2 mt-1 "
          >
            <Modal.Title
              className="ms-3 mt-1 modalTitle"
              
            >
              My Profile
            </Modal.Title>
          </Modal.Header>

          <ModalBody>
            <div className="d-flex flex-column justify-content-center align-items-center">
              <img
                src={image}
                style={{ width: "150px", height: "150px" }}
                alt="profile pic"
              />

              <div style={{ width: "270px" }}>
                <div>
                  <div className=" d-flex  justify-content-between">
                    <div style={{ color: "#353535", fontSize: "24px" }}>
                      Satyanarayan Adi
                    </div>

                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      viewBox="0 0 20 20"
                    >
                      <path
                        id="edit-svgrepo-com_2_"
                        data-name="edit-svgrepo-com(2)"
                        d="M20.959,2.7a2.974,2.974,0,0,0-4.207,0L15.087,4.365,7.248,12.2a.992.992,0,0,0-.261.461L6,16.63a.992.992,0,0,0,1.2,1.2l3.966-.991a.992.992,0,0,0,.461-.261L19.406,8.8l1.723-1.723a2.974,2.974,0,0,0,0-4.207Zm-2.8,1.4a.991.991,0,0,1,1.4,0l.17.17a.992.992,0,0,1,0,1.4L18.719,6.682l-1.542-1.6Zm-2.38,2.38,1.542,1.6-6.9,6.9-2.1.524.524-2.1ZM3.983,7.947a.992.992,0,0,1,.991-.991H9.932a.991.991,0,0,0,0-1.983H4.974A2.974,2.974,0,0,0,2,7.947V18.854a2.974,2.974,0,0,0,2.974,2.974H15.881a2.974,2.974,0,0,0,2.974-2.974V13.9a.991.991,0,1,0-1.983,0v4.957a.991.991,0,0,1-.991.991H4.974a.991.991,0,0,1-.991-.991Z"
                        transform="translate(-2 -1.828)"
                        fill-rule="#cdcdcd"
                      />
                    </svg>
                  </div>
                  <span
                    style={{
                      fontSize: "14px",
                      marginTop: "-100px",
                      color: "#424242",
                    }}
                  >
                    Super Admin
                  </span>
                </div>

                <div className="mt-3 inputphone">
                  <img alt={"phone-icon"} src={phoneIcon} />
                  <span>949-020-9492</span>
                </div>
                <div className="mt-3 inputemail">
                  <img
                    alt={"email-user-profile-icon"}
                    src={emailUserProfileIcon}
                  />
                  <span>satyanarayan.adi@ltts.com</span>
                </div>

                {/* Live tracking order */}

                <div>  
                  <Autocomplete               
                    disablePortal
                    id="combo-box-demo"
                    options={shipmentOptions}
                    getOptionLabel={(option) =>  { return option.label || ''}}
                    value={value}                   
                    onChange={(event, newValue) => {
                      console.log("newValue", newValue);
                      setValue(newValue);
                      console.log("value", value);
                      shipmentDetails.forEach((data, i) => {
                        console.log("data inside autocomplete", data);
                        console.log("value?.label", newValue?.label);
                        console.log("data.additionalInformation.lastReportedTracker inside auto", data.additionalInformation.lastReportedTracker);
                        if(data.additionalInformation?.lastReportedTracker === newValue?.label) {
                          console.log("index inside auto complete", i);
                          setIndexTracker(i);                          
                        }
                      })
                    }}
                    sx={{ width: 180 }}
                    renderInput={(params) => <TextField {...params} label="Serial Number" />}                            
                  /> 
                </div>
                { check && (
                <div className="mt-3 inputemail trackdetails" style={{cursor: 'pointer'}} onClick={handleOpenTracker}>
                  <img
                    src={TruckIcon} className="imageMargin" style={{marginRight: '12px'}}
                  />
                  <span>Track My Order</span>                
                </div>
                )}
                <LocationTracker
                  show={openTracker}
                  onHide={handleCloseTracker} 
                  indexTracker={indexTracker}
                />
              </div>
            </div>
          </ModalBody>
        </>

        
      )}
      {selectedItem === "help" && (
        <>
          <Modal.Header
            closeButton
            style={{ border: "none" }}
            className="me-2 "
          >
            <Modal.Title
              className=" "
              style={{ fontSize: "18px", fontWeight: "600" }}
            >
              What to expect
            </Modal.Title>
          </Modal.Header>
          <ModalBody className="p-1 m-2">
            <div
              className="pe-5"
              style={{ fontSize: "14px", color: "#424242" }}
            >
              Based on the current device configuration, the next report will
              include location at the time the report is sent and two condition
              measurements.
            </div>
            <Row className="mt-1">
              <Col></Col>
              <Col
                className="text-end"
                xs={8}
                style={{
                  color: "#FFC300",
                  fontSize: "12px",
                }}
              >
                Location locked and reported <br></br> along with last two
                sensor samples
              </Col>
            </Row>

            <div className="mt-4">
              <hr style={{ margin: "-8px 0px", width: "95%" }}></hr>
              <span>
                <img
                  alt={'yellow-icon'}src={polygonYellowIcon}
                  style={{ display: " block", margin: "-6px 0px 30px auto" }}
                />
              </span>
            </div>

            <Row
              xs={2}
              md={3}
              style={{
                marginTop: "-8%",
                position: "relative",
                width: "380px",
                fontSize: "12px",
              }}
            >
              <Col>0 min</Col>
              <Col>15 min</Col>
              <Col className="text-end pe-0">30 min</Col>

              <Col></Col>
              <Col style={{ color: "#B9B9B9", fontSize: "11px" }}>
                Sensor Sample
              </Col>
              <Col
                className="text-end pe-0"
                style={{ color: "#B9B9B9", fontSize: "11px" }}
              >
                Sensor Sample
              </Col>
            </Row>

            <div
              className="pe-5 mt-2"
              style={{ fontSize: "14px", color: "#424242" }}
            >
              When a breach warning is detected on any of the sensors, a report
              will be sent as soon as connection can be established. The
              sampling interval increases, but report interval remain the same.
            </div>

            <Row className="mt-2">
              <Col xs={4} style={{ color: "#FF455A", fontSize: "12px" }}>
                Breach reported w/location
              </Col>
              <Col
                xs={8}
                style={{
                  color: "#FF455A",
                  fontSize: "12px",
                  textAlign: "right",
                }}
              >
                Location locked and reported <br></br>along with last two sensor
                samples
              </Col>
            </Row>
            <div className="mt-4">
              <hr style={{ margin: "-9px 0px", width: "95%" }}></hr>
              <span>
                <img
                  alt={"red-icon"}
                  src={polygonRedIcon}
                  style={{ display: " block", margin: "-6px 0px 30px auto" }}
                />
              </span>
            </div>

            <Row xs={7} style={{ marginTop: "-7%", fontSize: "12px" }}>
              <Col>0 min</Col>
              <Col className="p-0">5 min</Col>
              <Col className="p-0">10 min</Col>
              <Col className="p-0">15 min</Col>
              <Col className="p-0">20 min</Col>
              <Col className="p-0">25 min</Col>
              <Col className="p-0">30 min</Col>
            </Row>

            <Row>
              <Col style={{ color: "#B9B9B9", fontSize: "11px" }}>
                Breach detected
              </Col>
              <Col
                style={{
                  color: "#B9B9B9",
                  fontSize: "11px",
                  textAlign: "right",
                }}
              >
                Sensor Sample every 5 minutes
              </Col>
            </Row>
            <div className="mt-1 pe-5">
              <span style={{ fontWeight: "600" }}>Note:</span>
              <div
                style={{
                  fontSize: "12px",
                  color: "#424242",
                  fontFamily: "italic",
                }}
              >
                clearing a breach will be reported immediately regardless of
                expected report time.
              </div>
            </div>
          </ModalBody>
        </>
      )}
    </Modal>
  );
};

export default SettingsPage;