/**
 * @author Martin Karkowski
 * @email m.karkowski@zema.de
 * @create date 2019-02-20 09:19:06
 * @modify date 2020-07-22 22:06:39
 * @desc [description]
 */

import React from 'react';
import { Badge, Col, Container, Nav, Row } from 'react-bootstrap';
import { FaTimesCircle } from 'react-icons/fa';
import DefaultNavbar from '../defaultNavbar';
import Selection, { SelecitonProps } from './selection';

const mainStyle = {
    minHeight: '90vh',
}

const sidebarStyle = {
    padding: '10px',
    background: "primary"
}

const contentStyle = {
    padding: '10px',
}

export interface ITab {
    label: string,
    id: string,
    delteable: boolean
}

export interface LayoutProps<T> extends SelecitonProps<T> {
    onResize?: () => void;
    onMount?: (_ref: React.RefObject<any>) => void;
    onUnmount?: () => void;
    onNewTab?: () => ITab;
    onTabSelect?: (tabId: string) => void;
    tabs?: {
        active: string,
        items: ITab[]
    }
}

export interface LayoutState<T> {
    update: null
}

class Layout<T> extends React.Component<LayoutProps<T>, LayoutState<T>> {

    protected _ref: React.RefObject<any>;
    protected _handleResize: () => void;

    componentDidMount() {
        const _this = this;

        function handleResize() {
            if (typeof _this.props.onResize === 'function') {
                _this.props.onResize();
            }
        }

        if (typeof this.props.onMount === 'function') {
            this.props.onMount(this._ref);
        }

        this._handleResize = handleResize;
        window.addEventListener('resize', this._handleResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this._handleResize);

        // Call the unmount
        if (typeof this.props.onUnmount === 'function') {
            this.props.onUnmount();
        }
    }

    constructor(props) {
        super(props);
        this._ref = React.createRef();
    }

    public requestRerender() {
        this.setState({
            update: null
        })
    }

    public render() {
        return (<>
            <DefaultNavbar></DefaultNavbar>
            <Container fluid style={mainStyle}>
                <Row style={mainStyle}>
                    <Col className="col-md-2 d-none d-md-block bg-light sidebar-sticky" style={sidebarStyle}>
                        <Selection selection={this.props.selection} ></Selection>
                    </Col>
                    <Col role="main" style={contentStyle}>
                        {this.props.tabs ?
                            <Nav variant="tabs" defaultActiveKey={this.props.tabs.active}>
                                {this.props.tabs.items.map((tab, idx) => {
                                    if (tab.delteable) {
                                        return (
                                            <Nav.Item key={tab.id}>
                                                <Nav.Link onSelect={_ => {
                                                    if (typeof this.props.onTabSelect === 'function') {
                                                        this.props.onTabSelect(tab.id);
                                                    }
                                                }} eventKey={tab.id}>{tab.label}
                                                    <Badge variant="danger" pill onClick={
                                                        e => {
                                                            // Remove the Items.
                                                            this.props.tabs.items.splice(idx, 1);
                                                            this.requestRerender();
                                                        }
                                                    } >X</Badge>
                                                    <FaTimesCircle onClick={
                                                        e => {
                                                            // Remove the Items.
                                                            this.props.tabs.items.splice(idx, 1);
                                                            this.requestRerender();
                                                        }
                                                    } ></FaTimesCircle>
                                                </Nav.Link>
                                            </Nav.Item>
                                        );
                                    } else {
                                        return (
                                            <Nav.Item key={tab.id}>
                                                <Nav.Link onSelect={_ => {
                                                    if (typeof this.props.onTabSelect === 'function') {
                                                        this.props.onTabSelect(tab.id);
                                                    }
                                                }} eventKey={tab.id}>{tab.label}</Nav.Link>
                                            </Nav.Item>
                                        );
                                    }
                                })}
                                <Nav.Item>
                                    <Nav.Link eventKey='_NEW_ITEM' onSelect={e => {
                                        if (typeof this.props.onNewTab === 'function') {
                                            const tab = this.props.onNewTab();
                                            this.props.tabs.items.push(tab);
                                            this.props.tabs.active = tab.id;
                                            this.requestRerender();
                                        }
                                        console.log(e)
                                    }}>
                                        +
                                    </Nav.Link>
                                </Nav.Item>
                            </Nav>
                            : ''
                        }

                        {/* style={{height: '100%'}} */}
                        <div ref={this._ref}></div>
                    </Col>
                </Row>
            </Container>
        </>);
    }
}

export default Layout;