import { DeleteOutlined } from '@ant-design/icons';
import { t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Button, Card, Table } from 'antd';
import React from 'react';
import {
  useSelectedShapeId,
  useShapes,
} from '../../components/annotator/hooks';
import { useStoreInstance } from '../../components/annotator/store-context';
import { EditableCell } from '../../components/editable-cell';
import { useInitialCardHeight } from '../../hooks/useInitialCardHeight';

export function ExtractedFields() {
  const { i18n } = useLingui();
  const storeInstance = useStoreInstance();
  const selectedShapeId = useSelectedShapeId();
  const shapes = useShapes();
  const cardRef = React.useRef<HTMLDivElement>();
  const initialCardHeight = useInitialCardHeight(cardRef);

  return (
    <Card ref={cardRef} title={t(i18n)`Extracted Fields`} style={{ flex: 1 }}>
      <Table
        pagination={false}
        scroll={{
          y: initialCardHeight ? initialCardHeight - 50 : 500,
        }}
        onRow={(record) => {
          return {
            onClick() {
              storeInstance.setSelectedShape(record.key);
            },
          };
        }}
        rowSelection={{
          hideSelectAll: true,
          columnWidth: 0,
          selectedRowKeys: [selectedShapeId],
          renderCell() {
            return null;
          },
        }}
        columns={[
          {
            title: t(i18n)`Label`,
            render(_, record) {
              return (
                <EditableCell
                  editable={{
                    onChange(value) {
                      storeInstance.setShapes((prev) =>
                        prev.map((shape) => {
                          if (shape.id === record.id) {
                            if (!shape.data)
                              shape.data = {
                                label: '',
                                value: '',
                              };
                            shape.data.label = value;
                          }
                          return shape;
                        }),
                      );
                    },
                  }}
                >
                  {record.data?.label}
                </EditableCell>
              );
            },
          },
          {
            title: t(i18n)`Actions`,
            width: 120,
            render(_, record) {
              return (
                <Button
                  danger
                  icon={<DeleteOutlined />}
                  onClick={() => {
                    storeInstance.setShapes((prev) =>
                      prev.filter((shape) => shape.id !== record.id),
                    );
                  }}
                >
                  {t(i18n)`Delete`}
                </Button>
              );
            },
          },
        ]}
        dataSource={shapes
          .map((shape) => ({
            key: shape.id,
            ...shape,
          }))
          .filter((shape) => !shape.isAnchor)}
      />
    </Card>
  );
}
