import React, { ComponentProps } from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'

import { LineGraph } from './component'
import { Frame, WIDTH, HEIGHT } from './test.style'
// import { useFontFamily } from 'storybook/src/components/font-provider'

type LineGraphProps = ComponentProps<typeof LineGraph>
type LineGraphValue = LineGraphProps['values'][0]
type LineGraphData = LineGraphValue['datas'][0]

/**
 * Dataリストを作成する
 */
const buildDatas = (
  start: number,
  end: number,
  add: number,
  numToDivide: number,
  offset: number,
) => {
  const datas: LineGraphData[] = []

  for (let t = start; t <= end; t += add) {
    datas.push({
      t,
      v: (t % numToDivide) + offset,
    })
  }

  return datas
}

const TIME_START = 1617180758
const TIME_END = TIME_START + 60 * 30
const DATA_01 = buildDatas(TIME_START, TIME_END, 1, 100, 0)
const DATA_02 = buildDatas(TIME_START, TIME_END, 50, 100, -50)

storiesOf(__dirname, module)
  /**
   * 通常表示
   */
  .add('normal', () => {
    return (
      <Frame>
        <LineGraph
          contentFit={false}
          size={{
            width: WIDTH,
            height: HEIGHT,
          }}
          time={{
            start: TIME_START,
            end: TIME_END,
          }}
          values={[
            {
              id: 'id-00',
              name: 'name-00',
              color: '#2facff',
              fill: false,
              hidden: false,
              datas: DATA_01,
            },
            {
              id: 'id-01',
              name: 'name-01',
              color: 'rgba(255, 0, 0, 0.5)',
              fill: true,
              hidden: false,
              datas: DATA_02,
            },
          ]}
          onLegendHiddenChange={action('onLegendHiddenChange')}
        />
      </Frame>
    )
  })
  /**
   * パネルにフィットさせる
   */
  .add('content_fit', () => {
    return (
      <Frame>
        <LineGraph
          contentFit={true}
          size={{
            width: WIDTH,
            height: HEIGHT,
          }}
          time={{
            start: TIME_START,
            end: TIME_END,
          }}
          values={[
            {
              id: 'id-00',
              name: 'name-00',
              color: '#2facff',
              fill: false,
              hidden: false,
              datas: DATA_01,
            },
            {
              id: 'id-01',
              name: 'name-01',
              color: 'rgba(255, 0, 0, 0.5)',
              fill: true,
              hidden: false,
              datas: DATA_02,
            },
          ]}
          onLegendHiddenChange={action('onLegendHiddenChange')}
        />
      </Frame>
    )
  })
  /**
   * id-01を非表示
   */
  .add('hidden-id-01', () => {
    return (
      <Frame>
        <LineGraph
          contentFit={false}
          size={{
            width: WIDTH,
            height: HEIGHT,
          }}
          time={{
            start: TIME_START,
            end: TIME_END,
          }}
          values={[
            {
              id: 'id-00',
              name: 'name-00',
              color: '#2facff',
              fill: false,
              hidden: false,
              datas: DATA_01,
            },
            {
              id: 'id-01',
              name: 'name-01',
              color: 'rgba(255, 0, 0, 0.5)',
              fill: true,
              hidden: true,
              datas: DATA_02,
            },
          ]}
          onLegendHiddenChange={action('onLegendHiddenChange')}
        />
      </Frame>
    )
  })