import * as React from 'react';

export type SetTransform = (a: any) => void;

export interface Props {
  config?: any;
  transforms?: any;
  setTransforms?: SetTransform;
}

export interface State {}

export class ComponentTableTransformColumn extends React.Component<
  Props,
  State
> {
  constructor(props) {
    super(props);
  }

  handleOrderChange(evt) {
    evt.preventDefault();

    let config = this.props.config,
      transforms = this.props.transforms,
      orderColumn = config.columnName,
      orderMethod = 'ASC';
    if (transforms.order) {
      if (transforms.order.column === config.columnName) {
        orderMethod = transforms.order.method === 'ASC' ? 'DESC' : 'ASC';
      }
    }

    transforms.order = {
      column: orderColumn,
      method: orderMethod,
    };

    this.props.setTransforms(transforms);
    this.setState({ updatedAt: new Date() });
  }

  handleInputChange(evt) {
    const config = this.props.config,
      transforms = this.props.transforms,
      value = evt.target.value;
    if (value) {
      transforms.filters[config.columnName] = {
        column: config.columnName,
        value: value,
      };
    } else {
      delete transforms.filters[config.columnName];
    }

    this.props.setTransforms(transforms);
    this.setState({ updatedAt: new Date() });
  }

  render() {
    let content,
      className = null,
      classNameArray = [],
      nameClassNameArray = ['d-flex', 'flex-row'],
      nameElmt = null,
      filterInput = null,
      config = this.props.config,
      transforms = this.props.transforms,
      filter = transforms.filters[config.columnName],
      orderUrl = `?order_column=${config.columnName}`,
      sortSymbol = null,
      filterValue = '';
    if (config.isMetric) {
      classNameArray.push('col-metric');
    }

    if (transforms.order && transforms.order.column === config.columnName) {
      nameClassNameArray.push('active');
      if (transforms.order.method) {
        if (transforms.order.method == 'ASC') {
          sortSymbol = <i className="fas fa-caret-up"></i>;
        } else {
          sortSymbol = <i className="fas fa-caret-down"></i>;
        }

        orderUrl = orderUrl + `&order_method=${transforms.order.method}`;
      }
    }

    if (filter) {
      filterValue = filter.value;
    }

    if (config.dataType) {
      switch (config.dataType) {
        case 'categorical':
          filterInput = (
            <input
              type="text"
              value={filterValue}
              onChange={this.handleInputChange.bind(this)}
            />
          );
          break;
        default:
          break;
      }
    }

    if (config.isSortable) {
      nameElmt = (
        <div className={nameClassNameArray.join(' ')}>
          <a href={orderUrl} onClick={this.handleOrderChange.bind(this)}>
            {config.name}
          </a>
          {sortSymbol}
        </div>
      );
    } else {
      nameElmt = <div>{config.name}</div>;
    }

    if (classNameArray.length > 0) {
      className = classNameArray.join(' ');
    }

    content = (
      <th className={className}>
        {nameElmt}
        {filterInput}
      </th>
    );

    return content;
  }
}