import * as React from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import DateItem from 'components/items/DateItem';
import qs from 'query-string';

import ModuleButton from 'components/items/ModuleButton';
import { NavLink } from 'react-router-dom';

import { transformFunctions } from 'config/root';
import config from 'config/general';
import styleIdentifiers from './tableListItem.scss';

const styles = classNames.bind(styleIdentifiers);

export interface TableListItemProps {
  type: string;
  item: Record<string, any>;
  noCheckbox?: boolean;
  action?: Function;
  index: number;
  history: Record<string, any>;
}

interface TableListItemState {}

export default class TableListItem extends React.Component<TableListItemProps, TableListItemState> {
  checkCliquable = (type: string) => {
    const types = ['link', 'button'];

    if (types.indexOf(type) >= 0) return false;
    return true;
  };

  edit = (cell?: Record<string, any>) => {
    const { type, item, history } = this.props;

    if (cell && !this.checkCliquable(cell.type)) return;

    history.push(`/${config.resourcePath}/${type}/${item.id}/update`);
  };

  actionButton = (action: Record<string, any>) => {
    const { history } = this.props;

    history.push({
      pathname: action.url,
      search: qs.stringify(action.data),
    });
  };

  renderText = (item: Record<string, any>) => {
    if (item.list) {
      return <TextItem list={item.list} item={item.value} />;
    }
    if (item.values) {
      return <TextItem path={item.values} item={item.value} />;
    }
    return <TextItem path={item.value} />;
  };

  renderContentCell = (item: Record<string, any>) => {
    switch (item.type) {
      case 'date':
        return <DateItem date={item.value} />;
      case 'button':
        return (
          <ModuleButton
            noMargin
            className={item.className}
            label={item.label}
            relative
            action={() => this.actionButton(item.action)}
          />
        );
      case 'link':
        return <NavLink to={item.href}>{this.renderText(item)}</NavLink>;
      default:
        return this.renderText(item);
    }
  };

  renderCell = (item: Record<string, any>, index: number) => {
    if (!item.hidden) {
      return (
        <td
          className={styles(this.checkCliquable(item.type) && 'clickable', item.type, item.size)}
          onClick={() => this.edit(item)}
          key={index}
        >
          {this.renderContentCell(item)}
        </td>
      );
    }
    return false;
  };

  render() {
    const { type, index, item, action, noCheckbox } = this.props;

    const model = transformFunctions[type];

    const data = model && model(item);

    const keys = data && Object.keys(data);

    return (
      <tr className={styles('TableListItem')}>
        {!noCheckbox && (
          <td className={styles('checkbox')}>
            {action && (
              <div
                className={styles('box', item.checked && 'checked')}
                onClick={() => action(item.id)}
              />
            )}
          </td>
        )}
        <td className={styles('clickable', 'index')} onClick={this.edit}>
          {index + 1}
        </td>
        {data && data.infos && (
          <td className={styles('status')}>
            <div className={styles('infos')}>
              {data.infos.info1 ? <div className={styles('info1')} /> : false}
              {data.infos.info2 ? <div className={styles('info2')} /> : false}
              {data.infos.info3 ? <div className={styles('info3')} /> : false}
              {data.infos.info4 ? <div className={styles('info4')} /> : false}
            </div>
          </td>
        )}
        {keys && keys.map((key, indexCell) => this.renderCell(data[key], indexCell))}
        <td className={styles('edit', 'last')}>
          <ModuleButton icon="pen" color="secondary" action={this.edit} rounded relative noMargin />
        </td>
      </tr>
    );
  }
}
