import React, { useState } from "react";

import { CONSTANTS } from "../../Utility/config";

function ShowValue({ mainCanvasInputHandler, inputArrayLength }) {

const MARGIN = CONSTANTS.margin;

const SCREEN_WIDTH = window.innerWidth;

const BAR_WIDTH = Math.floor(

(SCREEN_WIDTH - MARGIN * inputArrayLength) / inputArrayLength

);

const [enable, setEnable] = useState(

JSON.parse(localStorage.getItem("options"))?.showHeight || false

);

return (

<div

className={`${

BAR_WIDTH > 25 ? "block" : "hidden"

} h-[2.6em] dark:lg:hover:bg-gray-500 lg:hover:bg-lightGreen group relative rounded-md ${

mainCanvasInputHandler.state.options.showHeight &&

"dark:bg-gray-200 bg-lightGreen"

}`}

onClick={() => {

mainCanvasInputHandler.setState((prev) => ({

options: {

...prev.options,

showHeight: !mainCanvasInputHandler.state.options.showHeight,

},

}));

setEnable(!enable);

let j = JSON.parse(localStorage.getItem("options"));

if (j) {

j["showHeight"] = !enable;

localStorage.setItem("options", JSON.stringify(j));

}

}}

>

<div

className={`flex items-center justify-center relative cursor-pointer h-full dark:border-[1px] border-2 dark:border-gray-200 border-gray-300 rounded-md ${

mainCanvasInputHandler.state.options.showHeight &&

"dark:border-gray-400"

}`}

>

<div className={`p-2 peer group`}>

{

<div

className={`scale-[1.3] lg:group-hover:text-white ${

mainCanvasInputHandler.state.options.showHeight

? "text-white dark:text-[#7B7B7c]"

: "text-[#7B7B7c]"

} w-5 text-center font-bold`}

>

H

</div>

}

</div>

</div>

<p

className={`shadow-lg bg-white z-10 text-[.9em] absolute top-[4.4em] left-[50%] -translate-x-[50%] p-2 rounded-md hidden group-hover:block tool-tip-options text-gray-600 whitespace-nowrap font-semibold`}

>

Show height

</p>

</div>

);

}

export default ShowValue;