import React, { FC, useState, useEffect } from 'react';
import { Text } from '../Text';
import { Icon } from '../Icon';
import { SvgPencilOutline } from '../../assets/images/icons';
import { TableEditableCellProps } from './TableTypes';

export const TableEditableCell: FC<TableEditableCellProps> = ({
  cell,
  data,
  updateData,
  setSkipTableReset,
}: any) => {
  const [currentValue, setCurrentValue] = useState(cell.value);
  const [isEditting, setIsEditting] = useState(false);
  const isOnClickEditor =
    cell.column.editor &&
    (cell.column.editor.name === 'DateInput' ||
      cell.column.editor.name === 'Select');

  const editCell = () => {
    if (cell.column.editor) setIsEditting(true);
  };

  const saveNewData = (value?: any) => {
    setSkipTableReset(true);
    updateData(
      data.map((row: any, index: number) => {
        if (index === cell.row.index) {
          return {
            ...data[index],
            [cell.column.id]: value !== undefined ? value : currentValue,
          };
        }
        return row;
      })
    );
    setIsEditting(false);
    setTimeout(() => {
      setSkipTableReset(false);
    }, 300);
  };

  const handleChange = (e: any) => {
    const newValue = e && e.target ? e.target.value : e;
    setCurrentValue(newValue);
    if (isOnClickEditor) saveNewData(newValue);
  };

  const handleBlur = () => {
    if (!isOnClickEditor) saveNewData();
  };

  useEffect(() => {
    if (cell.value !== currentValue) {
      setCurrentValue(cell.value);
    }
  }, [cell.value]);

  return isEditting ? (
    <cell.column.editor
      value={currentValue}
      onChange={handleChange}
      onBlur={handleBlur}
      autoFocus
      {...cell.column.editorProps}
    />
  ) : (
    <>
      <Text
        variant="b2"
        color="gray.1"
        onClick={editCell}
        {...(cell.column.editor ? { className: 'canEdit' } : {})}
      >
        {cell.column.formatter
          ? cell.column.formatter(cell.value, cell.row.index)
          : cell.render('Cell')}
      </Text>
      {cell.column.editor && (
        <Icon
          Asset={SvgPencilOutline}
          width={16}
          height={16}
          color="gray.3"
          mt="-2px"
          ml="s"
          className="editIcon"
        />
      )}
      {cell.column.footer && <div>{cell.column.footer(cell.row.index)}</div>}
    </>
  );
};
