import * as _ from 'lodash';
import { Spin } from 'antd';
import * as React from 'react';
import { compose } from 'redux';
import { useFela } from 'react-fela';

import { ExetnsionRow } from './ExetnsionRow';

export interface IExtensionsListComponentProps {
  installed?: any[];
  loading: boolean;
  extensions: any[];
  mode: 'installed' | 'gallery';
  onRemove: (id: string) => any;
  onSelect: (id: string) => any;
  onInstall?: (id: string) => any;
}

export const ExtensionsList = (props: IExtensionsListComponentProps) => {
  const { css } = useFela();
  const { extensions, loading, onSelect, onRemove, onInstall, mode = 'gallery', ...rest } = props;

  const installed = React.useMemo(() => _.map(rest.installed, 'galleryIdentifier.id'), [ rest.installed ]);

  if (loading) {
    return <Spin />;
  }

  return (
    <div className={css(styles.root)}>
      {_.map(extensions, extension => (
        <ExetnsionRow
          onSelect={onSelect}
          extension={extension}
          onInstall={() => onInstall(extension)}
          onRemove={() => onRemove(extension.id)}
          isInstalled={mode === 'installed' ? true : _.includes(installed, extension.id)}
        />
      ))}
    </div>
  );
};

const styles: any = {
  root: () => ({
    width: '100%',
    height: '100%',
    overflowY: 'auto',
  }),
};
