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

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

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectInput from 'components/formItems/ProjectInput/ProjectInput';
import { required } from 'store/utils/validation';
import styleIdentifiers from './manageCharacteristicForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ManageCharacteristicFormProps = StateProps & DispatchProps & OwnProps;

const ManageCharacteristicForm = (props: ManageCharacteristicFormProps) => {
  const { list, name } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);

  return (
    <div className={styles('manage-characteristic-form')}>
      {list &&
        list.map((item, index) => (
          <Field
            key={index}
            component={ProjectInput}
            name={`${name}[${item._id}]`}
            type="checkbox"
            seed="checkbox"
            customClassName={styles('customCheckbox')}
          >
            <div className={styles('item')} key={item._id}>
              {item.thumbnail && (
                <div className={styles('icon-wrapper')}>
                  <img
                    className={styles('icon')}
                    src={item.thumbnail.large}
                    alt={item.title && item.title[lg]}
                  />
                </div>
              )}
              <TextItem path={item.title} />
            </div>
          </Field>
        ))}
    </div>
  );
};

export default ManageCharacteristicForm;
