import React from 'react';

import Switch from 'react-switch';

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

import './CtrlBoolean.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 CtrlBoolean({
  currMod,
  updatePath,
  prop,
  value,
  inheritVal,
  deleteProp,
  updateProps,
}: ControlProps) {
  return (
    <React.Fragment key={currMod.id + updatePath}>
      {prop.clearable !== false &&
        value !== null &&
        value !== undefined &&
        !inheritVal && (
          <div
            className='ctrl-boolean__clear-btn'
            onClick={() => deleteProp(updatePath)}
          >
            Clear
          </div>
        )}
      <Switch
        className={`ctrl-boolean__switch ${
          inheritVal ? 'ctrl-boolean__switch--inherit-val' : ''
        }`}
        onColor={'#6CA7EE'}
        uncheckedIcon={
          <span className='ctrl-boolean__switch__icon--unchecked'>No</span>
        }
        checkedIcon={
          <span className='ctrl-boolean__switch__icon--checked'>Yes</span>
        }
        height={21}
        width={52}
        handleDiameter={19}
        checked={!!value}
        onChange={(checked) => updateProps(currMod.id, updatePath, checked)}
      />
    </React.Fragment>
  );
}
