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

import { ExtensionHeader } from './view/ExtensionHeader';
import { ExtensionDetails } from './view/ExtensionDetails';
import { ExtensionChangelog } from './view/ExtensionChangelog';

const { TabPane } = Tabs;

export interface IExtensionComponentProps {
    extension: any;
    loading: any;
}

export const Extension = (props: IExtensionComponentProps) => {
        const { extension, loading } = props;

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

        return (
            <div>
                <div>
                    <ExtensionHeader extension={extension} />
                </div>
                <div>
                    <Tabs animated={false}>
                        <TabPane key="extension.details" tab="Details">
                            <ExtensionDetails extension={extension} />
                        </TabPane>
                        <TabPane key="extension.changelog" tab="Changelog">
                            <ExtensionChangelog extension={extension} />
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        );
};
