import * as _ from 'lodash';
import * as React from 'react';
import { compose } from 'redux';
import { useFela } from 'react-fela';
import { Avatar, Button } from 'antd';
import { Icon } from '@ant-design/compatible';

export interface IExtensionRowComponentProps {
  extension: any;
  onSelect: any;
  onInstall: any;
  onRemove: any;
  isInstalled: boolean;
}

export const ExetnsionRow = (props: IExtensionRowComponentProps) => {
  const { css } = useFela();
  const { extension, onSelect, onInstall } = props;
  return (
    <div
      onClick={() => onSelect(extension.id)}
      className={css(styles.extension)}
    >
      <div className={css(styles.icon)}>
        <Avatar size={56} src={extension.icon}>
          {extension.displayName}
        </Avatar>
      </div>
      <div className={css(styles.content)}>
        <div className={css(styles.name)}>{extension.displayName}</div>
        <div className={css(styles.description)}>{extension.description}</div>
        <div className={css(styles.author)}>
          {extension.publisherDisplayName || 'author'}
        </div>
      </div>
      <div className={css(styles.actions)}>
        <div className={css(styles.installations)}>
          <Icon type="cloud-download" /> {extension.installCount || 0}
        </div>
        <div className={css(styles.spacer)}>
          <small>{extension.version}</small>
        </div>
        <div className={css(styles.buttons)}>
          {props.isInstalled ? (
            <Button
              onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                props.onRemove(extension.id);
              }}
              type="primary"
              danger={true}
              size="small"
            >
              {'Remove'}
            </Button>
          ) : (

              <Button
                onClick={e => {
                  e.stopPropagation();
                  e.preventDefault();
                  onInstall(extension.id);
                }}
                type="primary"
                size="small"
              >
                {'Install'}
              </Button>
            )}
        </div>
      </div>
    </div>
  );
};

const styles: any = {
  extension: {
    width: '100%',
    display: 'flex',
    cursor: 'pointer',
    padding: '5px 15px',
    flexDirection: 'row',
    '&:hover': {
      background: 'rgba(0, 0, 0, .1)',
    },
  },
  icon: {
    flexGrow: 0,
  },
  name: {
    fontWeight: 'bold',
    marginBottom: '5px',
  },
  description: {
    marginBottom: '5px',
  },
  author: {
    fontSize: '12px',
    marginBottom: '5px',
  },
  actions: {
    flexGrow: 0,
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    flexGrow: 1,
    margin: '0 10px',
  },
  installations: {
    flexGrow: 0,
    textAlign: 'right',
  },
  spacer: {
    flexGrow: 1,
    textAlign: 'right',
  },
  buttons: {
    flexGrow: 0,
    textAlign: 'right',
  },
};
