import React from 'react';

import { BuilderModule, PropOther } from '../../../@types/settings.js';
import ColorPicker from '../../components/ColorPicker/ColorPicker.js';

import './CtrlColor.scss';

type ControlProps = {
  updateProps: (id: string, path: string, value: any) => void;
  deleteProp: (path: string) => void;
  currMod: BuilderModule;
  updatePath: string;
  prop: PropOther;
  value: any;
  inheritVal?: boolean;
};

export default function CtrlColor({
  currMod,
  updatePath,
  prop,
  value,
  inheritVal,
  deleteProp,
  updateProps,
}: ControlProps) {
  return (
    <React.Fragment key={currMod.id + updatePath}>
      {prop.clearable !== false && value && !inheritVal && (
        <div
          className='ctrl-color__clear-btn'
          onClick={() => deleteProp(updatePath)}
        >
          Clear
        </div>
      )}
      <ColorPicker
        className={`ctrl-color__color-picker`}
        inheritVal={inheritVal}
        color={value}
        onChange={(color) => updateProps(currMod.id, updatePath, color)}
      />
    </React.Fragment>
  );
}
