import React from 'react';
import { Checkbox } from '@patternfly/react-core';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
import './descriptiveCheckbox.scss';
import { ExclamationTriangleIcon } from '@patternfly/react-icons';

// eslint-disable-next-line no-unused-vars
const DescriptiveCheckbox = (props) => {
  const {
    label,
    title,
    description,
    isDanger,
    isGlobal,
    checkedWarning,
    input: { onChange, checked, ...input },
  } = useFieldApi({
    ...props,
    type: 'checkbox',
  });
  const formOptions = useFormApi();

  return (
    <Checkbox
      {...input}
      isChecked={checked}
      id={`descriptive-checkbox-${input.name}`}
      onChange={(...props) => {
        if (isGlobal) {
          formOptions.batch(() => {
            formOptions.getRegisteredFields().forEach((field) => {
              if (typeof formOptions.getFieldState(field).value === 'boolean') {
                formOptions.change(field, false);
              }
            });
          });
        } else {
          formOptions.change('unsubscribe.from-all', false);
        }

        onChange(...props);
      }}
      data-type="descriptive-checkbox"
      className="pref-c-descriptive-checkbox"
      label={
        <span
          className={classNames('pref-c-checkbox-label', {
            'pref-c-checkbox-label-error': isDanger || isGlobal,
          })}
        >
          {label || title}
        </span>
      }
      description={
        <div>
          {description && (
            <span className="pref-c-checkbox-description">{description}</span>
          )}
          {checked && checkedWarning && (
            <span className="pref-c-checkbox-warning">
              <ExclamationTriangleIcon /> {checkedWarning}
            </span>
          )}
        </div>
      }
    />
  );
};

DescriptiveCheckbox.propTypes = {
  FieldProvider: PropTypes.any,
  formOptions: PropTypes.any,
  name: PropTypes.string,
  label: PropTypes.string,
  title: PropTypes.string,
  description: PropTypes.string,
  isDanger: PropTypes.bool,
  isGlobal: PropTypes.bool,
};

DescriptiveCheckbox.defaultProps = {
  name: '',
  label: '',
  isDanger: false,
};

export default DescriptiveCheckbox;