import { format } from 'date-fns'
import { BarChart } from './index.js'

const TEST_DATA = [
  {
    name: 'A',
    value1: Math.floor(Math.random() * 9001) + 1000,
    value2: Math.floor(Math.random() * 9001) + 1000,
    value3: Math.floor(Math.random() * 9001) + 1000,
  },
  {
    name: 'B',
    value1: Math.floor(Math.random() * 9001) + 1000,
    value2: Math.floor(Math.random() * 9001) + 1000,
    value3: Math.floor(Math.random() * 9001) + 1000,
  },
  {
    name: 'C',
    value1: Math.floor(Math.random() * 9001) + 1000,
    value2: Math.floor(Math.random() * 9001) + 1000,
    value3: Math.floor(Math.random() * 9001) + 1000,
  },
  {
    name: 'D',
    value1: Math.floor(Math.random() * 9001) + 1000,
    value2: Math.floor(Math.random() * 9001) + 1000,
    value3: Math.floor(Math.random() * 9001) + 1000,
  },
  {
    name: 'E',
    value1: Math.floor(Math.random() * 9001) + 1000,
    value2: Math.floor(Math.random() * 9001) + 1000,
    value3: Math.floor(Math.random() * 9001) + 1000,
  },
  {
    name: 'F',
    value1: Math.floor(Math.random() * 9001) + 1000,
    value2: Math.floor(Math.random() * 9001) + 1000,
    value3: Math.floor(Math.random() * 9001) + 1000,
  },
  {
    name: 'G',
    value1: Math.floor(Math.random() * 9001) + 1000,
    value2: Math.floor(Math.random() * 9001) + 1000,
    value3: Math.floor(Math.random() * 9001) + 1000,
  },
] as any

export const Vertical = () => {
  return (
    <div
      style={{
        height: 500,
        width: '100%',
        display: 'flex',
      }}
    >
      <BarChart
        orientation="vertical"
        data={TEST_DATA}
        xKey="name"
        yKeys={['value3']}
        xFormat={(x) => `${x}`}
        yFormat={(y) => '$' + Math.round(y).toString()}
      />
    </div>
  )
}

export const VerticalMultipleSeparate = () => {
  return (
    <div
      style={{
        height: 500,
        width: '100%',
        display: 'flex',
      }}
    >
      <BarChart
        variant="separate"
        orientation="vertical"
        data={TEST_DATA}
        xKey="name"
        yKeys={['value1', 'value2', 'value3']}
        xFormat={(x) => `${x}`}
        yFormat={(y) => '$' + Math.round(y).toString()}
      />
    </div>
  )
}

export const VerticalMultipleStacked = () => {
  return (
    <div
      style={{
        height: 500,
        width: '100%',
        display: 'flex',
      }}
    >
      <BarChart
        variant="stacked"
        orientation="vertical"
        data={TEST_DATA}
        xKey="name"
        yKeys={['value1', 'value2', 'value3']}
        xFormat={(x) => `${x}`}
        yFormat={(y) => '$' + Math.round(y).toString()}
      />
    </div>
  )
}

export const Horizontal = () => {
  return (
    <div
      style={{
        height: 500,
        width: '100%',
        display: 'flex',
      }}
    >
      <BarChart
        orientation="horizontal"
        data={TEST_DATA}
        xKey="name"
        yKeys={['value3']}
        xFormat={(x) => `${x}`}
        yFormat={(y) => '$' + Math.round(y).toString()}
      />
    </div>
  )
}

export const HorizontalMultipleSeparate = () => {
  return (
    <div
      style={{
        height: 500,
        width: '100%',
        display: 'flex',
      }}
    >
      <BarChart
        variant="separate"
        orientation="horizontal"
        data={TEST_DATA}
        xKey="name"
        yKeys={['value1', 'value2', 'value3']}
        xFormat={(x) => `${x}`}
        yFormat={(y) => '$' + Math.round(y).toString()}
      />
    </div>
  )
}

export const HorizontalMultipleStacked = () => {
  return (
    <div
      style={{
        height: 500,
        width: '100%',
        display: 'flex',
      }}
    >
      <BarChart
        variant="stacked"
        orientation="horizontal"
        data={TEST_DATA}
        xKey="name"
        yKeys={['value1', 'value2', 'value3']}
        xFormat={(x) => `${x}`}
        yFormat={(y) => '$' + Math.round(y).toString()}
      />
    </div>
  )
}
