import React from 'react';
import './fields.css';

type ColorInputProps = {
  label?: string;
  description?: string;
  value: string;
  onChange: (value: string) => void;
  defaultValue?: string;
  resetLabel?: string;
  disabled?: boolean;
};

export const ColorInput: React.FC<ColorInputProps> = ({
  label,
  description,
  value,
  onChange,
  defaultValue,
  resetLabel = 'Reset',
  disabled,
}) => {
  const canReset = Boolean(defaultValue) && value !== defaultValue;

  return (
    <div className="ips-field-group">
      {label && <div className="ips-field-label">{label}</div>}
      <div className="ips-field-colorinput-row">
        <input
          type="color"
          className="ips-field-colorinput"
          value={value || defaultValue || '#ffffff'}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
        />
        {canReset && (
          <button
            type="button"
            className="ips-field-colorinput__reset"
            onClick={() => {
              if (defaultValue) {
                onChange(defaultValue);
              }
            }}
            disabled={disabled}
          >
            {resetLabel}
          </button>
        )}
      </div>
      {description && <div className="ips-field-description">{description}</div>}
    </div>
  );
};