import React, { useState } from "react";
import {
  CardContainer,
  CardBody,
  CardHeader,
  ModalCardContainer,
  CloseModalButton,
} from "./index.styled";
import InputComponent from "../input";
import ButtonComponent from "../button";
import { IoMdClose } from "react-icons/io";
import Modal from "react-modal";
import SliderWithTooltip from "./slider";

/**
 * @param {{
 *  onClick: function,
 *  style: CSSProperties,
 * }} props - properties of Component
 *
 */
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const NotificationThresholdComponent = (props) => {
  const { findText } = useTranslation(wordStore);
  const [value, setValue] = useState(1);
  //console.log(value);

  const modalCustomStyles = {
    overlay: {
      position: "fixed",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: "rgba(0, 0, 0, 0.5)",
      zIndex: 9999999999,
      transition: "opacity 2000ms ease-in-out",
    },
    content: {
      position: "absolute",
      overflow: "auto",
      WebkitOverflowScrolling: "touch",
      outline: "none",
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
      borderRadius: "30px",
      border: "none",
      zIndex: 333333333,
      background: "transparent",
      width: "755px",
    },
  };
  return (
    <Modal
      isOpen={props.isOpen}
      onRequestClose={props.onRequestClose}
      style={modalCustomStyles}
      closeTimeoutMS={2000}
    >
      <ModalCardContainer>
        <CloseModalButton onClick={props.onRequestClose}>
          <IoMdClose />
        </CloseModalButton>

        <CardContainer style={props.style}>
          <CardHeader>
            <h1>{findText("Set Treshold Notification")}</h1>
            <h6>
              {findText(
                "Adjust the slider to set a treshold for your notification and input a notification name"
              )}
            </h6>
          </CardHeader>

          <CardBody>
            <form action="">
              <SliderWithTooltip value={value} setValue={setValue} />
              <div className="form__contents">
                <div className="input__contents">
                  <InputComponent
                    inputType={findText("text")}
                    label={findText("Notification Name")}
                    inputName={findText("notification_name")}
                    value={""}
                    placeholder={findText(
                      "Enter the name for this notification"
                    )}
                  />
                </div>
                <ButtonComponent
                  type="secondary"
                  text={findText("Save")}
                  styles={{
                    marginTop: 31,
                  }}
                />
              </div>
              <div className="notification__wrapper"></div>
              <div className="btn__footer">
                <ButtonComponent type="secondary" text={findText("Cancel")} />

                <ButtonComponent text={findText("Done")} />
              </div>
            </form>
          </CardBody>
        </CardContainer>
      </ModalCardContainer>
    </Modal>
  );
};
export default NotificationThresholdComponent;
