import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Button, Balloon, DatePicker, Select,Input } from "@alicloudfe/components";
import moment from "moment";

const showSelect = <Button className="btrigger">Show Select</Button>;
const showDatePicker = <Button className="btrigger">Show DatePicker</Button>;

const dateValue = moment("2018-01-01", "YYYY-MM-DD", true);

const Tooltip = Balloon.Tooltip;
const defaultTrigger = (
  <Button className="btrigger" style={{ margin: "5px" }}>
    default style
  </Button>
);
const innerButton = <Button className="btrigger">Fill in form</Button>;
const triggerTooltip = <Button style={{margin: '5px'}}>show tooltip</Button>;

const top = (
  <Button style={{ margin: "5px" }} id="top" className="btrigger">
    top
  </Button>
);
const right = (
  <Button style={{ margin: "5px" }} id="right" className="btrigger">
    right
  </Button>
);
const bottom = (
  <Button style={{ margin: "5px" }} id="bottom" className="btrigger">
    bottom
  </Button>
);
const left = (
  <Button style={{ margin: "5px" }} id="left" className="btrigger">
    left
  </Button>
);
const topLeft = (
  <Button style={{ margin: "5px" }} id="topLeft" className="btrigger">
    top left
  </Button>
);
const topRight = (
  <Button style={{ margin: "5px" }} id="topRight" className="btrigger">
    top right
  </Button>
);
const rightTop = (
  <Button style={{ margin: "5px" }} id="rightTop" className="btrigger">
    right top
  </Button>
);
const rightBottom = (
  <Button style={{ margin: "5px" }} id="rightBottom" className="btrigger">
    right bottom
  </Button>
);
const bottomLeft = (
  <Button style={{ margin: "5px" }} id="bottomLeft" className="btrigger">
    bottom left
  </Button>
);
const bottomRight = (
  <Button style={{ margin: "5px" }} id="bottomRight" className="btrigger">
    bottom right
  </Button>
);
const leftTop = (
  <Button style={{ margin: "5px" }} id="leftTop" className="btrigger">
    left top
  </Button>
);
const leftBottom = (
  <Button style={{ margin: "5px" }} id="leftBottom" className="btrigger">
    left bottom
  </Button>
);

const Content = () => (
  <div>
    <h4 style={{ marginTop: '4px' }}>balloon title</h4>
    <p>balloon content</p>
    <p>多段落的内容悬浮出现的气泡，相关的内容复杂，可以是一行，也可以是多行</p>
    <div
      style={{
        marginTop: "16px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      <span style={{ color: "#A6A6A6", cursor: "pointer" }}>查看更多</span>
      <Button type="normal">主要按钮</Button>
    </div>
  </div>
);
storiesOf("Balloon", module).add("Balloon", () => {
  return (
    <div id="app-wrapper">
      <div id="app" style={{ padding: "16px" }}>
        <Balloon
          trigger={defaultTrigger}
          closable={false}
          align="r"
          triggerType="click"
        >
          <Content />
        </Balloon>
        <div style={{ paddingLeft: 220, paddingTop: 100 }}>
          <div style={{ marginLeft: 75 }}>
            <Tooltip trigger={topLeft} align="tl">
              text text
            </Tooltip>
            <Tooltip trigger={top} align="t">
              text text
            </Tooltip>
            <Tooltip trigger={topRight} align="tr">
              text text
            </Tooltip>
          </div>
          <div style={{ width: 80, float: "left" }}>
            <Tooltip trigger={leftTop} align="lt">
              text text
            </Tooltip>
            <Tooltip trigger={left} align="l">
              text text
            </Tooltip>
            <Tooltip trigger={leftBottom} align="lb">
              text text
            </Tooltip>
          </div>
          <div style={{ width: 80, marginLeft: 290 }}>
            <Tooltip trigger={rightTop} align="rt">
              text text
            </Tooltip>
            <Tooltip trigger={right} align="r">
              text text
            </Tooltip>
            <Tooltip trigger={rightBottom} align="rb">
              text text
            </Tooltip>
          </div>
          <div style={{ marginLeft: 80, clear: "both" }}>
            <Tooltip trigger={bottomLeft} align="bl">
              text text
            </Tooltip>
            <Tooltip trigger={bottom} align="b">
              text text
            </Tooltip>
            <Tooltip trigger={bottomRight} align="br">
              text text
            </Tooltip>
          </div>
        </div>
        <div className="container nested">
          <Balloon
            type="primary"
            autoFocus
            trigger={showSelect}
            closable={false}
            triggerType="click"
          >
            <Select dataSource={["apple", "banana", "orange"]} followTrigger />
          </Balloon>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Balloon
            type="primary"
            autoFocus
            trigger={showDatePicker}
            closable={false}
            triggerType="click"
          >
            <DatePicker defaultValue={dateValue} followTrigger />
          </Balloon>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Balloon
            type="primary"
            autoFocus
            trigger={innerButton}
            closable={false}
            triggerType="click"
          >
            <Balloon
              trigger={<Button type="primary">please click</Button>}
              followTrigger
              triggerType="click"
            >
              nesting balloon content
            </Balloon>
          </Balloon>
        </div>
        <div style={{ padding: 24, height: "100%", backgroundColor: "#fff" }}>
          <section style={{ marginBottom: 40 }}>
            <h2>无障碍</h2>
            <p
              dangerouslySetInnerHTML={{
                __html: "弹层id, 传入值才会支持无障碍。",
              }}
            />
          </section>
          <div className="container nested">
            <Balloon
              id="inner-a11y-balloon-1"
              autoFocus={false}
              trigger={<Button type="primary">Fill in sub-form</Button>}
              popupContainer={(trigger) => trigger.parentNode}
              triggerType="click"
            >
              please input your age:
              <Input
                placeholder="Age"
                size="small"
                label="Age :"
                id="balloon-input-1"
              />
              <br />
              <br />
            </Balloon>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Balloon
              id="a11y-balloon"
              type="primary"
              autoFocus
              trigger={innerButton}
              triggerType="click"
            >
              <Balloon
                id="inner-a11y-balloon"
                autoFocus
                trigger={<Button type="primary">Fill in sub-form</Button>}
                popupContainer={(trigger) => trigger.parentNode}
                triggerType="click"
              >
                please input your age:
                <Input
                  placeholder="Age"
                  size="small"
                  label="Age :"
                  id="balloon-input-2"
                />
                <br />
                <br />
              </Balloon>
              <br />
              please input your name:
              <Input
                placeholder="Name"
                size="small"
                label="Name :"
                id="balloon-input-3"
              />
              <br />
              <br />
            </Balloon>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Tooltip trigger={triggerTooltip} id="aria-tooltip">
              <p>This is content for tooltip.</p>
            </Tooltip>
          </div>
        </div>
        <Tooltip trigger={triggerTooltip} id="aria-tooltip">
            <p>This is content for tooltip.</p>
        </Tooltip>
      </div>
    </div>
  );
});
