import * as React from "react"
import { storiesOf } from "@storybook/react"
import { ThemeProvider } from "styled-components"
import { theme } from "../../../"
import Adore from "../components/ButtonAdore"
import { compose, withProps } from "recompose"
import * as Button from "../../../components/Button"

const ButtonAdoreWithData = compose(
  withProps((props) => {
    return {
      callSaveAdore: (count) => {
        const url: string =
          "http://localhost:3007/asset/heart/episode/eatmeagain007/" + count
        console.log(url)
        // await fetch(url, {
        //     method: 'PUT',
        //     headers: {
        //         'Content-Type': 'application/json'
        //     },
        // })
      }
    }
  })
)(Adore) as any

storiesOf("Adore", module)
  .addDecorator((story) => (
    <ThemeProvider theme={theme}>{story()}</ThemeProvider>
  ))
  .add("adore with fix position", () => (
    <div>
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      a<br />
      6767<br />
      a<br />
      a<br />
      56<br />
      a<br />
      a<br />
      44<br />
      44<br />
      44<br />
      44<br />
      44<br />
      44<br />
      44<br />
      44<br />
      44<br />
      44<br />
      44<br />
      44<br />
      4234324324324324<br />
      <Button.Primary
        // tslint:disable-next-line:jsx-no-lambda
        onClick={() => {
          console.log("click")
        }}
      >
        button
      </Button.Primary>
      <ButtonAdoreWithData
        style={{
          display: "block",
          position: "fixed",
          right: 0,
          bottom: 0,
          zIndex: 9,
          pointerEvents: "none"
        }}
        countAllAdore={"1000000000000"}
      />
    </div>
  ))