import { faHatWizard } from '@fortawesome/free-solid-svg-icons';
import * as React from 'react';
import DynLayout, {IDynamicLayoutProps, IDynamicWidget} from '../../resources/ui/layout/dynamicLayout';
import TabEntry from '../../resources/ui/layout/tabs';

export interface DynLayoutProps {

}

export interface DynLayoutState {

}

class TestDynLayoutComponent extends React.Component<DynLayoutProps, DynLayoutState> {

    componentDidMount(){
        this.setState({
            layoutSettings: {
                width: process.browser ? window.innerWidth : 1920,
                autoSize: false            
            },
        });

        console.log('here',process.browser ? window.innerWidth : 1920)
    }


    constructor(props) {
        super(props);
    }

    render() {

        const settings: IDynamicLayoutProps<any> = {
            components: [
                {
                    visible: true,
                    component() {
                        return (<># Test Widget 1 </>)
                    },
                    gridSettings: {
                        h: 5,
                        w: 5,
                        x: 0,
                        y: 0,
                        minW: 3,
                        maxH: 5,
                        minH: 5,
                        maxW: 5,
                    },
                    id: 'test',
                    label: 'Test Widget 1',
                    props: {
                    },
                    hideable: true,
                },
                {
                    visible: true,
                    component() {
                        return (<TabEntry tabs={{
                            active: '-1',
                            allowNewTabs: true,
                            items: [],
                        }}></TabEntry>)
                    },
                    gridSettings: {
                        h: 5,
                        w: 10,
                        x: 5,
                        y: 0,
                        minW: 5,
                        maxH: 5,
                        minH: 5,
                    },
                    id: 'test2',
                    label: '# Test Widget 2',
                    props: {
                    },
                    hideable: false,
                    bg:'light'
                }
            ],
            layoutSettings: {
                width: process.browser ? window.innerWidth : 1920,
                autoSize: false,
                preventCollision: false,
                cols: 15,
                compactType: 'horizontal'
            },
            toolbar: {
                items: [
                    {
                        type: 'link',
                        label: 'docs',
                        ref: '/docs',
                        icon: faHatWizard
                    }
                ]
            },
            generateData(){
                return {
                    content: 'hello'
                }
            }
        }

        return React.createElement(DynLayout,settings);

    }
}

export default TestDynLayoutComponent;