import React from 'react';
import {
  Table,
  Input,
  createStyles,
  ScrollArea,
  Loader,
} from 'tidbcloud-uikit/components';
import { WidgetModel } from '@jupyter-widgets/base';
import { useModelMessenger, useModelState } from './model';
import { withModelContext } from './withModelContext';

const useStyles = createStyles({
  table: {
    borderRadius: 8,
    borderCollapse: 'initial',
    overflow: 'hidden',

    '& thead tr th': {
      height: 50,
      textAlign: 'left',
      padding: '0.4375rem 0.625rem',
    },
    '& thead tr th:nth-of-type(1)': {
      width: 140,
    },
    '& thead tr th:nth-of-type(2)': {
      width: 140,
    },
  },
});

interface WidgetProps {
  model: WidgetModel;
  loading: boolean;
}
interface Column {
  header: string;
  accessor: string;
  editable?: boolean;
}

export interface WidgetModelState {
  columns: Column[];
  data: any[];
  loading?: boolean;
  meta?: Record<string, any>;
}

function ReactEditableTable(props: WidgetProps) {
  const [columns] = useModelState<WidgetModelState, 'columns'>('columns');
  const [meta] = useModelState<WidgetModelState, 'meta'>('meta');
  const [data, setData] = useModelState<WidgetModelState, 'data'>('data');
  const send = useModelMessenger();
  const { classes } = useStyles();
  const { loading } = props;

  const rows = data.map((item, index) => {
    return (
      <tr key={index}>
        {columns.map((c) => (
          <td key={c.header}>
            {c.editable ? (
              <Input
                type="text"
                defaultValue={item[c.accessor]}
                onBlur={(e: any) => {
                  const next = e.target.value;
                  if (item[c.accessor] !== next) {
                    const data = { ...item, [c.accessor]: e.target.value };
                    setData((prev) => {
                      prev[index] = data;
                    });

                    send({
                      type: 'cell-changed',
                      payload: {
                        row: data,
                        index,
                        meta,
                      },
                    });
                  }
                }}
              />
            ) : (
              item[c.accessor]
            )}
          </td>
        ))}
      </tr>
    );
  });

  return (
    <div>
      <ScrollArea h={400} maw={800}>
        <Table cellSpacing={0} className={classes.table}>
          <thead>
            <tr>
              {columns.map((i) => (
                <th key={i.header}>{i.header}</th>
              ))}
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </Table>
      </ScrollArea>

      <div>{loading && <Loader size="xs" />}</div>
    </div>
  );
}

export default withModelContext(ReactEditableTable);