import * as React from 'react';
import { Button, Tabs } from 'antd';
import { Flex, Box } from '@rebass/grid'

const TabPane = Tabs.TabPane;

export interface PanelProps {
    name: string;
    tabs: string[];
    onDelete: () => void;
    onCancel: () => void;
    onDone: () => void;
}

interface CatalogoPanelProps {
    content: any;
    props: PanelProps;
}

interface CatalogoPanelProps {

}

export default class CatalogoPanel extends React.Component<CatalogoPanelProps, CatalogoPanelProps> {
    render() {
        const { props, content } = this.props;
        return (
            <section className='catalogo-panel'>
                <Box className='title'><b>{props.name}</b></Box>
                <Flex className='actions' justifyContent="space-between" width='100%'>
                    <Box>
                        <Button onClick={props.onDelete}>Delete</Button>
                    </Box>
                    <Box>
                        <Button onClick={props.onCancel}>Cancel</Button>
                        <Button type="primary" onClick={props.onDone}>Done</Button>
                    </Box>
                </Flex>
                <Box className='tabs'>
                    <Tabs type="card">
                        {
                            props.tabs.map((tab, index) => {
                                return <TabPane tab={tab} key={index.toString()}></TabPane>
                            })
                        }
                    </Tabs>
                </Box>
                <section className='content'>
                    {content}
                </section>
            </section>
        );
    }
}