import { getClassNames } from '@websolutespa/bom-core';
import { FormControl, useControl } from '@websolutespa/bom-mixer-forms';
import { useLabel } from '@websolutespa/bom-mixer-hooks';
import { ChangeEvent, FocusEvent, useId, useState } from 'react';
import { Button } from '../components';
import { Checkbox, Field, FieldProps, Label } from '../forms';
import { FieldError } from './field-error';

type FieldConsentProps = {
  control: FormControl;
};

export function FieldConsent({ control }: FieldConsentProps & FieldProps) {
  const uid = useId();
  const label = useLabel();

  const uniqueName = `${control.name}-${uid}`;
  const uniqueNameTrue = `${uniqueName}-true`;
  const uniqueNameFalse = `${uniqueName}-false`;

  const [state, setValue, setTouched] = useControl<boolean>(control);

  const onSelect = (value: boolean) => {
    // console.log('value', value);
    setValue(value);
  };

  const [focus, setFocus] = useState(false);

  const onTrueChange = (event: ChangeEvent<HTMLInputElement>) => {
    onSelect(true);
  };

  const onTrueBlur = (_: FocusEvent<HTMLInputElement>) => {
    setTouched();
    setFocus(false);
  };

  const onTrueFocus = (_: FocusEvent<HTMLInputElement>) => {
    setFocus(true);
  };

  const onFalseChange = (event: ChangeEvent<HTMLInputElement>) => {
    onSelect(false);
  };

  const onFalseBlur = (_: FocusEvent<HTMLInputElement>) => {
    setTouched();
    setFocus(false);
  };

  const onFalseFocus = (_: FocusEvent<HTMLInputElement>) => {
    setFocus(true);
  };

  const detail = control.customData?.detail;

  const [active, setActive] = useState(false);

  const controlLabel = control.label && label(control.label);
  return (
    state.flags.hidden ? (
      <input type="hidden" value={state.value ? 'true' : 'false'} />
    ) : (
      <Field state={state} className={getClassNames('field-consent', { required: control.validators.length > 0 })} padding="1em 0" borderBottom="1px solid var(--color-neutral-200)">
        <div className="field-consent__description">
          {controlLabel && (
            <span dangerouslySetInnerHTML={{ __html: controlLabel }}></span>
          )}
          {detail && (
            <>
              &nbsp;<Button onClick={() => setActive(!active)}>Dettagli</Button>
              {active && (
                <p className="field-consent__detail" dangerouslySetInnerHTML={{ __html: detail }} />
              )}
            </>
          )}
        </div>
        <div className="field-consent__group">

          <Label htmlFor={uniqueNameTrue} margin="0">
            <Checkbox
              id={uniqueNameTrue}
              name={uniqueNameTrue}
              onChange={onTrueChange}
              onBlur={onTrueBlur}
              onFocus={onTrueFocus}
              disabled={state.flags.disabled || state.flags.readonly}
              checked={state.value === true}
              aria-invalid={state.flags.invalid}
              aria-describedby={`${uniqueName}-error`}
            />
            <span>{label('form.consent.true')}</span>
          </Label>

          <Label htmlFor={uniqueNameFalse} margin="0">
            <Checkbox
              id={uniqueNameFalse}
              name={uniqueNameFalse}
              onChange={onFalseChange}
              onBlur={onFalseBlur}
              onFocus={onFalseFocus}
              disabled={state.flags.disabled || state.flags.readonly}
              checked={state.value === false}
            />
            <span>{label('form.consent.false')}</span>
          </Label>

        </div>
        <FieldError state={state} id={`${uniqueName}-error`} />
      </Field>
    )
  );
}