import * as React from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import FormElement from 'components/structure/FormElement';
import FormItemLabel from 'components/items/FormItemLabel';
import { getContentList, getContent, clone } from 'store/utils/helper';
import styleIdentifiers from './customRadio.scss';

const styles = classNames.bind(styleIdentifiers);

export interface CustomRadioProps {
  label: string;
  nameItem: string;
  valueItem: string;
  onChange: Function;
  input: {};
  meta: {};
  items: object[];
  classNameRadioContainer?: string;
  classNameSingleRadio?: string;
  customClassName?: string;
}

interface CustomRadioState {}

export default class CustomRadio extends React.Component<CustomRadioProps, CustomRadioState> {
  handleChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
    const { input, onChange } = this.props;

    // when puttin type="radio" to the Field => value is not updated
    const value = event.target.value;

    if (input.onChange) input.onChange(value);

    if (onChange) onChange(value);
  };

  treatItems = () => {
    const { items, content, input } = this.props;

    let listItems;

    if (typeof items === 'string' && content) {
      listItems = getContent(content, items);
    } else {
      listItems = clone(items);
    }
    if (!Array.isArray(listItems) && typeof listItems === 'object') {
      listItems = Object.values(listItems);
    }

    if (!listItems) return null;

    listItems.map(item => {
      if (!item) return null;
      item.id = `${input.name}-${item.value || ''}`;
      return item;
    });
    return listItems;
  };

  render() {
    const {
      disabled,
      label,
      items,
      input,
      united,
      classNameRadioContainer,
      radioContainerClassName,
      classNameSingleRadio,
      singleRadioClassName,
      singleRadioActiveClassName,
      imageClassName,
      radioLabelClassName,
      customClassName,
      meta: { touched, error },
      // Label part (see label)
      labelClassName,
      labelStyle,
      labelIcon,
      labelIconClassName,
      labelIconStyle,
      star,
      notRequired,
    } = this.props;

    // to update background color when checked just overwrite css variable $color_radio_checked
    const list = this.treatItems();

    const fromContent = typeof items === 'string';

    return (
      <div
        className={styles(
          'CustomRadio',
          united && 'united',
          error && 'error',
          touched && 'touched',
          customClassName,
        )}
        onFocus={input.onFocus}
        onBlur={input.onBlur}
        tabIndex="0"
      >
        {list && (
          <FormElement {...this.props}>
            {label && (
              <FormItemLabel
                label={label}
                labelClassName={labelClassName}
                labelStyle={labelStyle}
                labelIcon={labelIcon}
                labelIconClassName={labelIconClassName}
                labelIconStyle={labelIconStyle}
                star={star}
                notRequired={notRequired}
              />
            )}
            <div
              className={styles(
                'value-container',
                classNameRadioContainer,
                radioContainerClassName,
              )}
              suppressHydrationWarning
            >
              {list.map((item, key) => {
                if (!item) return false;
                const isActive = input.value === item.value;
                return (
                  <label htmlFor={item.id} key={key}>
                    <input
                      disabled={disabled}
                      aria-label={input && input.name}
                      type="radio"
                      name={input.name}
                      value={item.value}
                      id={item.id}
                      onChange={this.handleChange}
                      checked={isActive}
                    />
                    <div
                      className={styles(
                        'single',
                        classNameSingleRadio,
                        singleRadioClassName,
                        isActive && 'active',
                        isActive && singleRadioActiveClassName,
                      )}
                    >
                      {isActive && item.imgActive && (
                        <img src={item.imgActive} className={styles(imageClassName)} alt="" />
                      )}
                      {!isActive && item.img && (
                        <img src={item.img} className={styles(imageClassName)} alt="" />
                      )}
                      {!item.img && (
                        <>
                          {fromContent && (
                            <TextItem
                              item={item}
                              className={styles('label', radioLabelClassName)}
                            />
                          )}
                          {!fromContent && (
                            <TextItem
                              path={item.label || item.value}
                              className={styles('label', radioLabelClassName)}
                            />
                          )}
                        </>
                      )}
                      {item.img && item.label && (
                        <TextItem
                          path={item.label}
                          className={styles('label', radioLabelClassName)}
                        />
                      )}
                    </div>
                  </label>
                );
              })}
            </div>
          </FormElement>
        )}
      </div>
    );
  }
}
