import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import { getContent, clone } from 'store/utils/helper';
import FormItemLabel from 'components/items/FormItemLabel';
import TextItem from 'components/items/TextItem';
import FormElement from 'components/structure/FormElement';
import styleIdentifiers from './radio.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ProjectRadioProps = StateProps & DispatchProps & OwnProps;

const ProjectRadio = (props: ProjectRadioProps) => {
  const {
    items,
    input,
    label,
    className,
    radioClassName,
    onChange,
    circleClassName,
    insideCircleClassName,
    textClassName,
    rowClassName,
    inlined,
    imageClassName,
    onFocus,
    onBlur,
    disabled,
  } = props;
  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const treatItems = () => {
    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);

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

    if (!listItems) return null;

    return listItems;
  };

  const list = treatItems();

  const isChecked = item => {
    if (!item) return false;
    const itemValue = item.value || item.label || item;

    return input.value === itemValue;
  };

  const handleChange = item => {
    if (disabled) return;
    const value = (item && (item.value || item.label)) || item;

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

    if (onChange) onChange(value);
  };

  return (
    <FormElement {...props} className={styles('radio', className, radioClassName)}>
      {label && <FormItemLabel {...props} className="" />}
      <div
        className={styles('items-wrapper', inlined && 'inlined', disabled && 'disabled')}
        // allows to have touched effect
        onFocus={input.onFocus}
        onBlur={input.onBlur}
        tabIndex="0"
      >
        {list &&
          list.map(function(elem, index) {
            if (!elem) return false;
            return (
              <div
                key={index}
                className={styles('row-container', rowClassName, isChecked(elem) && 'active')}
              >
                <div
                  className={styles('circle', circleClassName)}
                  onClick={() => handleChange(elem)}
                >
                  <div className={styles('inside-circle', insideCircleClassName)} />
                </div>

                {elem.img ? (
                  <div className={styles('img', imageClassName)} onClick={() => handleChange(elem)}>
                    <img src={elem.img} alt={elem.label || elem.value} />
                  </div>
                ) : (
                  <div className={styles('text', textClassName)} onClick={() => handleChange(elem)}>
                    <TextItem path={elem.label || elem} />
                  </div>
                )}
              </div>
            );
          })}
      </div>
    </FormElement>
  );
};

export default ProjectRadio;
