import { memo } from 'react';
import { Select } from 'components/inputs';
import { DataLabel } from './DataTable';

interface DataColumnProps {
  index: string | number;
  name: string;
  data?: string[];
  labels: DataLabel[];
  typeValue: string;
  onTypeChange: React.ChangeEventHandler<HTMLSelectElement>;
  width?: number;
  focus: boolean;
  disabled: boolean;
}

export const DataColumn = memo(function DataColumn({
  index,
  name,
  data = [],
  labels,
  typeValue,
  onTypeChange,
  width = 240,
  focus,
  disabled,
}: DataColumnProps) {
  return (
    <div className="flexNone tableColumn padding2 rounded4" style={{ width }}>
      <Select
        title="Data type"
        className={focus ? 'focus' : ''}
        options={labels}
        name={String(index)}
        value={typeValue}
        onChange={onTypeChange}
        placeholder="Select"
        disabled={disabled}
        required
      />

      <div
        style={{
          ...(typeValue === 'skip' && {
            opacity: 0.5,
            userSelect: 'none',
          }),
        }}
      >
        <div className="tableRow paddingX5 truncate bold" title={name}>
          {name}
        </div>
        {data.map((value, i) => {
          return (
            <div className="tableRow paddingX5 truncate" title={value} key={i}>
              {value}
            </div>
          );
        })}
      </div>
    </div>
  );
});