Untitled

import React, { useContext } from 'react'
import classes from "./index.module.css";
import {COLORS} from "../../constants";
import cx from "classnames";
import toolboxContext from '../../store/toolbox-context';
import boardContext from '../../store/board-context';


const Toolbox = () => {


    const {activeToolItem}=useContext(boardContext);


    const {toolboxState,changeStroke}=useContext(toolboxContext);

    
    const strokeColor=toolboxState[activeToolItem]?.stroke;
    
    
    console.log(changeStroke);
    console.log(activeToolItem);
    console.log(toolboxState);

    



  

  return (
    <div className={classes.container}>
       

         <div className={classes.selectOptionContainer}>

            <div className={classes.toolBoxLabel}>Stroke</div>
            <div className={classes.colorsContainer}>
            {Object.keys(COLORS).map((k) => {
              return (
                <div
                  key={k}
                  className={cx(classes.colorBox, {
                    [classes.activeColorBox]: strokeColor === COLORS[k],
                  })}
                  style={{ backgroundColor: COLORS[k] }}
                  onClick={() => 

                    {

                      if (changeStroke && typeof changeStroke === "function") {
                        changeStroke(activeToolItem, COLORS[k]);
                      } else {
                        console.error("changeStroke is not defined!");
                      }
                    }

                    // changeStroke(activeToolItem, COLORS[k])
                  
                  }
                ></div>
              );
            })}

            </div>
          

         </div>
         
    </div>
  )
}

export default Toolbox