"use strict";

import React from 'react';

import ApTheme from '../../lib/ap_theme';
import ApThemeStyle from '../../lib/ap_theme_style';

import {
    ApText, ApPassword, ApButton, ApSlider, ApRange, ApContainer,
    ApHeader, ApHeaderLogo, ApHeaderTab, ApHeaderTabItem, ApHeaderMenu, ApHeaderMenuItem, ApHeaderDropdown, ApHeaderDropdownItem,
    ApFlex, ApFlexItem,
    ApJumbotron, ApJumbotronTitle, ApJumbotronText,
    ApUpload,
    ApDevtool,
    ApDropdown, ApDropdownItem,
    ApNotice, ApNoticeItem,
    ApMenu, ApMenuItem,
    ApInfo,ApInfoHeader,ApInfoBody,ApInfoItem
}  from 'apeman-react-basic';

import {
    ApSigninForm,
    ApSignupForm,
    ApRecoverSendForm,
    ApRecoverResetForm,
    ApProfileLeadForm
}  from 'apeman-react-handy';

import pkg from '../../package.json';

let Demo = React.createClass({
    getInitialState() {
        return {
            dominant: '#b35600',
            subordinate: '#FFF',
            accent: '#EE3',
            dropdownOpen: false
        }
    },
    render() {
        let s = this,
            state = s.state;

        return (
            <div>
                <ApThemeStyle dominant={state.dominant}
                              subordinate={state.subordinate}
                              accent={state.accent}
                >
                </ApThemeStyle>
                <ApTheme>
                    <ApContainer>
                        <div>
                            <ApText placeholder="primary color"
                                    onChange={(e)=>{s.setState({dominant: e.target.value || ''})}}
                                    value={state.dominant}></ApText>
                            <ApPassword placeholder="Password"
                            />
                        </div>
                        <div>
                            <ApButton>A Button</ApButton>
                            <ApButton primary={true}>Primary Button</ApButton>
                        </div>
                    </ApContainer>
                    <hr/>
                    <ApContainer>
                        <div>
                            <ApSlider />
                        </div>
                        <div>
                            <ApRange />
                        </div>
                    </ApContainer>
                    <hr/>
                    <ApContainer>
                        <ApHeader style={{position:`relative`}}>
                            <ApHeaderDropdown title="TRYME"
                                              open={state.dropdownOpen}
                                              onTap={s._toggleDropdown}>
                                <ApHeaderDropdownItem>Fuge</ApHeaderDropdownItem>
                                <ApHeaderDropdownItem>Foge</ApHeaderDropdownItem>
                            </ApHeaderDropdown>
                            <ApHeaderMenu>
                                <ApHeaderMenuItem >Menu01</ApHeaderMenuItem>
                                <ApHeaderMenuItem >Menu02</ApHeaderMenuItem>
                            </ApHeaderMenu>
                            <ApHeaderLogo>Brand Name</ApHeaderLogo>
                            <ApHeaderTab>
                                <ApHeaderTabItem selected={false}>
                                    Others
                                </ApHeaderTabItem>
                            </ApHeaderTab>
                            <ApNotice>
                                <ApNoticeItem text="This is notice of hoge" actions={{
                                    'SayYes': ()=>{},
                                    'SayNo': ()=>{}
                                }}/>
                                <ApNoticeItem text="This is notice of fuge"/>
                            </ApNotice>
                        </ApHeader>
                    </ApContainer>
                    <hr/>
                    <ApContainer>
                        <ApFlex>
                            <ApFlexItem wide={true} style={{padding: 16, background: '#AAA'}}>Hoge</ApFlexItem>
                            <ApFlexItem style={{padding: 16, width:180,background: '#CCC'}}>Foge</ApFlexItem>
                        </ApFlex>
                    </ApContainer>
                    <hr/>
                    <ApContainer>
                        <ApJumbotron>
                            <ApJumbotronTitle>Hey</ApJumbotronTitle>
                            <ApJumbotronText>Welcome to apeman</ApJumbotronText>
                        </ApJumbotron>
                    </ApContainer>
                    <hr/>
                    <ApContainer>
                        <ApUpload multiple={true} text="Upload your file"/>
                    </ApContainer>
                    <hr/>
                    <ApContainer>
                        <ApDropdown title="Tap me!"
                                    open={state.dropdownOpen}
                                    onTap={s._toggleDropdown}>
                            <ApDropdownItem>Hoge</ApDropdownItem>
                            <ApDropdownItem>Fuge</ApDropdownItem>
                        </ApDropdown>
                    </ApContainer>

                    <hr/>
                    <ApContainer>

                    </ApContainer>

                    <hr/>
                    <ApContainer>

                    </ApContainer>

                    <hr/>
                    <ApContainer>

                    </ApContainer>

                    <hr/>
                    <ApContainer>
                        <ApSigninForm>
                        </ApSigninForm>
                    </ApContainer>

                    <hr/>
                    <ApContainer>
                        <ApSignupForm>
                        </ApSignupForm>
                    </ApContainer>


                    <hr/>
                    <ApContainer>
                        <ApRecoverSendForm />
                    </ApContainer>

                    <hr/>
                    <ApContainer>
                        <ApRecoverResetForm />
                    </ApContainer>

                    <hr/>
                    <ApContainer>
                        <ApMenu>
                            <ApMenuItem icon="fa fa-support" text="Help"/>
                            <ApMenuItem icon="fa fa-info-circle" text="About"/>
                            <ApMenuItem icon="fa fa-sign-out" text="Logout"/>
                            <ApMenuItem icon="fa fa-sun-o" text="Foo"/>
                            <ApMenuItem icon="fa fa-sun-o" text="Bar"/>
                            <ApMenuItem icon="fa fa-sun-o" text="Baz"/>
                        </ApMenu>
                    </ApContainer>

                    <hr/>
                    <ApContainer>
                        <ApInfo>
                            <ApInfoHeader>hoge</ApInfoHeader>
                            <ApInfoBody>
                                <ApInfoItem label="foo" value="bar"/>
                                <ApInfoItem label="foo2" value="bar2"/>
                            </ApInfoBody>
                        </ApInfo>
                    </ApContainer>

                    <hr/>
                    <ApContainer>
                        <ApProfileLeadForm/>
                    </ApContainer>

                    <hr/>
                    <ApContainer>

                    </ApContainer>

                    <hr/>
                    <ApContainer>

                    </ApContainer>

                </ApTheme>

                <ApDevtool version={pkg.version}
                           NODE_ENV="demo"
                />
            </div>
        );
    },
    _toggleDropdown(){
        let s = this,
            {state} = s;
        s.setState({
            dropdownOpen: !state.dropdownOpen
        });
    }
});

module.exports = Demo;