import React, {
  useState,
  useCallback
} from 'react';
import styled from 'styled-components';

import {
  ShellComponent,
  Search,
  Nav,
  Icon
} from '@alicloud/console-components';
import {
  H3
} from '@alicloud/demo-rc-elements';

import {
  ITestingProps
} from '../../types';

const ScAvatar = styled.img`
  margin-right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
`;
const ScSquare = styled.div`
  margin-right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.1);
`;
const NavFooterButton = styled.button`
  line-height: 24px;
  border: 0;
  background: #eee;
  color: #999;
`;
const ScStage = styled.div`
  min-height: 1200px;
  background: #fff;
`;

export default function Testing({
  component
}: ITestingProps<ShellComponent>): JSX.Element {
  const Shell = component;
  
  const [stateNavCollapsed, setStateNavCollapsed] = useState<boolean | undefined>(false);
  const handleToggle = useCallback(() => setStateNavCollapsed(!stateNavCollapsed), [stateNavCollapsed, setStateNavCollapsed]);
  
  return <>
    <H3>Some Case</H3>
    <Shell {...{
      // className={'iframe-hack'}
      // device={this.state.device}
      style: {
        width: '100%',
        height: '800px',
        border: '1px solid #eee'
      }
    }}>
      <Shell.Branding>
        <ScSquare />
        <strong>App Name</strong>
      </Shell.Branding>
      <Shell.Navigation direction="hoz">
        <Search {...{
          key: '2',
          shape: 'simple',
          type: 'dark',
          placeholder: 'Search',
          style: {
            width: '200px'
          }
        }} />
      </Shell.Navigation>
      <Shell.Action>
        <ScAvatar src="https://img.alicdn.com/imgextra/i1/1557410160/O1CN019arX9Y1D3KBDXqRGW_!!0-saturn_solar.jpg_270x270.jpg" alt="用户头像" />
        <strong>MyName</strong>
      </Shell.Action>
      <Shell.Navigation {...{
        collapse: stateNavCollapsed,
        onCollapseChange: setStateNavCollapsed
      }}>
        <Nav embeddable aria-label="global navigation">
          <Nav.Item icon="account">Nav Item 1</Nav.Item>
          <Nav.Item icon="calendar">Nav Item 2</Nav.Item>
          <Nav.Item icon="atm">Nav Item 3</Nav.Item>
          <Nav.Item icon="account">Nav Item 4</Nav.Item>
          <Nav.Item icon="account">Nav Item 5</Nav.Item>
          <Nav.Item icon="account">Nav Item 6</Nav.Item>
          <Nav.Item icon="account">Nav Item 7</Nav.Item>
        </Nav>
        <NavFooterButton {...{
          onClick: handleToggle
        }}>
          <Icon {...{
            type: stateNavCollapsed ? '"arrow-right' : 'arrow-left',
            size: 'xs'
          }} />
        </NavFooterButton>
      </Shell.Navigation>
      <Shell.LocalNavigation>
        <Nav embeddable aria-label="local navigation">
          <Nav.SubNav label="Local Nav1">
            <Nav.Item>Local Nav1</Nav.Item>
          </Nav.SubNav>
          <Nav.SubNav label="Local Nav2">
            <Nav.Item>Local Nav2</Nav.Item>
          </Nav.SubNav>
          <Nav.SubNav label="Local Nav3">
            <Nav.Item>Local Nav3</Nav.Item>
          </Nav.SubNav>
          <Nav.Item>Local Nav4</Nav.Item>
          <Nav.Item>Local Nav5</Nav.Item>
          <Nav.Item>Local Nav6</Nav.Item>
          <Nav.Item>Local Nav7</Nav.Item>
          <Nav.Item>Local Nav8</Nav.Item>
          <Nav.Item>Local Nav4</Nav.Item>
          <Nav.Item>Local Nav5</Nav.Item>
          <Nav.Item>Local Nav6</Nav.Item>
          <Nav.Item>Local Nav7</Nav.Item>
          <Nav.Item>Local Nav8</Nav.Item>
        </Nav>
      </Shell.LocalNavigation>
      <Shell.Content>
        <ScStage />
      </Shell.Content>
      <Shell.Footer>
        <span>XConsole </span>
        <span>@ 3000 AliBABA 版权所有</span>
      </Shell.Footer>
      <Shell.Ancillary />
      <Shell.ToolDock>
        <Shell.ToolDockItem>
          <Icon type="calendar" />
        </Shell.ToolDockItem>
        <Shell.ToolDockItem>
          <Icon type="atm" />
        </Shell.ToolDockItem>
        <Shell.ToolDockItem>
          <Icon type="account" />
        </Shell.ToolDockItem>
      </Shell.ToolDock>
    </Shell>
  </>;
}