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

export const ExtensionHeader = (props) => {
        const { css } = useFela();
        const { extension = {}, onInstall } = props;

        return (
            <div className={css(styles.header)}>
                <div className={css(styles.icon)}>
                    <Avatar size={72} src={extension.icon}>{extension.displayName}</Avatar>
                </div>
                <div className={css(styles.content)}>
                    <div className={css(styles.name)}>
                        <h3>{extension.name || 'untitles'}</h3>
                        <Tag>{extension.extensionID}</Tag>
                    </div>
                    <div className={css(styles.info)}>
                        <div>{extension.publisherDisplayName || 'author'}</div>
                        <div>
                            <Icon type="cloud-download" />
                            {' '}
                            {extension.installCount || 0}
                        </div>
                        <div>
                            <Rate style={{ fontSize: '12px' }} disabled={true} value={0} />
                        </div>
                        <div>
                            <a href="#">Repository</a>
                        </div>
                    </div>
                    <div className={css(styles.description)}>{extension.description}</div>
                    <div className={css(styles.actions)}>
                        <Button onClick={() => onInstall(extension.id)} type="primary" size="small">{'Install'}</Button>
                    </div>
                </div>
            </div>
        );
};

const styles: any = {
    header: {
        width: '100%',
        display: 'flex',
        padding: '15px',
        cursor: 'pointer',
        flexDirection: 'row',
    },
    icon: {
        flexGrow: 0,
        margin: '0 15px 0 0',
    },
    content: {
        flexGrow: 1,
        margin: '0 0 0 15px',
    },
    name: {
        display: 'flex',
        margin: '0 0 5px 0',
        flexDirection: 'row',
        '& > h3': {
            marginRight: '10px',
        },
    },
    info: {
        display: 'flex',
        margin: '0 0 5px 0',
        flexDirection: 'row',
        '& > div': {
            margin: '0 5px',
            '&:first-child': {
                marginLeft: 0,
            },
            '&:lsat-child': {
                marginRight: 0,
            },
        },
    },
    description: {
        margin: '0 0 5px 0',
    },
};
