import { useEffect } from 'react';
import { List } from 'antd';
import { DATASET_MANAGER_EVENT } from '../../models/dataset-manager';
import { CANVAS_EVENT } from '../../models/canvas';
import { COMPONENT_EVENT } from '../../models/component';
import { useForceUpdate } from '../hooks';
import { getPrefixedClassName } from '../utils';
import { AddDatasetFormProps, DatasetProps } from './types';
import AddDatasetForm from './AddDatasetForm';

export default function DatasetManager(props: DatasetProps) {
  const { datasetManager, canvas } = props;
  const { focusedComponent } = canvas;
  const forceUpdate = useForceUpdate();

  useEffect(() => {
    datasetManager.on(DATASET_MANAGER_EVENT.AddDataset, forceUpdate);
    canvas.on(CANVAS_EVENT.FocusComponent, forceUpdate);
    canvas.on(CANVAS_EVENT.BlurComponent, forceUpdate);

    return () => {
      datasetManager.off(DATASET_MANAGER_EVENT.AddDataset);
      canvas.off(CANVAS_EVENT.FocusComponent);
      canvas.off(CANVAS_EVENT.BlurComponent);
    };
  }, []);

  useEffect(() => {
    if (focusedComponent) {
      focusedComponent.on(COMPONENT_EVENT.UpdateDataset, forceUpdate);

      return () => {
        focusedComponent.off(COMPONENT_EVENT.UpdateDataset);
      };
    }

    return () => {};
  }, [focusedComponent]);

  const handleDatasetAdd: AddDatasetFormProps['onDatasetAdd'] = (url, name) => {
    const id = datasetManager.addDataset(url, name);
    focusedComponent?.updateDataset(id);
  };

  const renderDatasetList = () => {
    return (
      <List
        className={getPrefixedClassName('dataset-list')}
        itemLayout="horizontal"
        dataSource={Object.values(datasetManager.datasetMap)}
        renderItem={(dataset) => {
          const { id, name } = dataset.config;
          const titleClassName = (() => {
            if (focusedComponent) {
              if (id === focusedComponent.config.datasetId)
                return `${getPrefixedClassName('dataset-list-item-title')} ${getPrefixedClassName(
                  'dataset-list-item-focused'
                )}`;
              return getPrefixedClassName('dataset-list-item-title');
            }
            return '';
          })();

          return (
            <List.Item className={getPrefixedClassName('dataset-list-item')}>
              <List.Item.Meta
                title={
                  <span className={titleClassName} onClick={() => focusedComponent?.updateDataset(id)}>
                    {name}
                  </span>
                }
                description={
                  <span className={getPrefixedClassName('dataset-list-item-description')} title={id}>
                    id: {id}
                  </span>
                }
              />
            </List.Item>
          );
        }}
      />
    );
  };

  return (
    <div className={getPrefixedClassName('dataset')}>
      <h3>Dataset Manager</h3>
      <AddDatasetForm onDatasetAdd={handleDatasetAdd} />
      {renderDatasetList()}
    </div>
  );
}