import * as React from 'react';

import {
    ActionBox,
    Button,
    ButtonBar,
    Card,
    Column,
    Divider,
    Header,
    Icon,
    List,
    ListItem,
    Row,
    ScrollContainer,
    Spacer,
    Spinner,
    Table,
    Text,
    Tray,
    TrayItem,
    TrayOverflow,
} from '../web'

const doNothing = (e: React.MouseEvent<any>) => e.preventDefault();

const EXAMPLE_TRAY_KEY = 'EXAMPLE_TRAY_KEY'

export class TrayExample extends React.Component<any, any> {

    public renderTray() {

        const showTrayOverflow = true;

        return (
            <Tray name={EXAMPLE_TRAY_KEY} id="testTrayId">
                <TrayItem
                    id="testTrayItemId"
                    onClick={doNothing}
                    icon="frequency"
                    tooltip="Choose frequencies"
                    stroke
                    primary />
                <TrayItem
                    onClick={doNothing}
                    icon="frequency"
                    active />
                <TrayItem
                    onClick={doNothing}
                    icon="frequency"
                    active
                    disabled />
                <TrayItem
                    onClick={doNothing}
                    icon="frequency"
                    active
                    disabled
                    stroke />
                <TrayItem
                    onClick={doNothing}
                    icon="motorbike"
                    active
                    selected
                    dynamic />
                <TrayItem
                    onClick={doNothing}
                    text="Auto"
                    active
                    selected
                    dynamic />
                <TrayItem
                    onClick={doNothing}
                    text="Manual"
                    dynamic />
                <TrayItem
                    onClick={doNothing}
                    text="YR"
                    tooltip="WO TRAINING CIRCUIT"
                    disabled
                    active />
                <TrayItem
                    onClick={doNothing}
                    text="35"
                    tooltip="JUST-EAT"
                    active />
                <TrayItem expand="left">CS</TrayItem>

                {showTrayOverflow ?
                    (<TrayOverflow trayName={EXAMPLE_TRAY_KEY} align="center" width={435}>
                        {Array.apply(null, { length: 20 })
                            .map(Number.call, Number)
                            .map((e: any) => (
                                <TrayItem
                                    key={e}
                                    onClick={doNothing}
                                    text="XX"
                                    tooltip="WO TRAINING CIRCUIT"
                                    disabled
                                    active />
                        ))}
                    </TrayOverflow>
                ) : null}

                <TrayItem icon="search" input>
                    <input type="text" placeholder="Search by job no..." />
                </TrayItem>
                <TrayItem icon="line-views" secondary />
            </Tray>
        )
    }

    public render(): JSX.Element {
        const explode = () => new Promise((resolve) => {
            console.log('confirm clicked')
            setTimeout(
                () => {
                    console.log('"saved"')
                    alert('goodbye...')
                    resolve(true)
                },
                500,
            )
        })

        return (
            <Column fullWidth id="testTrayColumnId">
                {this.renderTray()}
                <Column fullWidth style={{
                    backgroundColor: 'white',
                    boxSizing: 'border-box',
                    padding: '20px',
                }}>

                    <Table striped bordered hover condensed>
                        <thead>
                            <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td><td colSpan={2}>Larry the Bird</td><td>@twitter</td>
                            </tr>
                        </tbody>
                    </Table>

                    <ScrollContainer>
                        <Card id="testCardId" style={{ minHeight: '3em' }}>
                            This is a Card
                        </Card>
                        <Card style={{ minHeight: '3em' }} disabled>
                            This is a disabled
                        </Card>
                        <Card style={{ minHeight: '3em' }} active={true}>
                            This is an active Card
                        </Card>
                        <Card style={{ minHeight: '3em' }}>
                            row with actionbox
                            <ActionBox actions={[{
                                    className: 'expand',
                                    icon: 'motorbike',
                                    tooltip: 'Test',
                                    onClick: () => null,
                                    iconProps: { rotate: 180 },
                                }, {
                                    className: 'map',
                                    icon: 'a-b',
                                    tooltip: 'Show on the map',
                                    onClick: () => null,
                                    disabled: true,
                                }]} />
                        </Card>
                    </ScrollContainer>
                    <Text>An example paragraph text</Text>
                    <Spinner />
                    <Button>Example button</Button>
                    <List>
                        <ListItem>foo</ListItem>
                        <ListItem>bar</ListItem>
                        <ListItem>baz</ListItem>
                    </List>
                </Column>

                <ButtonBar>
                    <Button id="testButton1Id">Button 1</Button>
                    <Button disabled={true}>Button 2</Button>
                    <Button >Button 3</Button>
                </ButtonBar>

            </Column >
        )
    }
}