import { LineChart } from '@based/ui'
import { format } from 'date-fns'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Line Chart',
  group: 'Charts',
  section: 'components',
  icon: 'edit',
  component: LineChart,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'Et harum quidem rerum facilis est et expedita distinctio.',
    style: {
      frame: false,
      size: '100%',
    },
    render: () => {
      const TEST_DATA = Array.from({ length: 720 }, (_, i) => ({
        ts: Date.now() + i * 60 * 1000,
        Subscriptions: Math.floor(
          350 + 150 * Math.sin((i / 360) * 2 * Math.PI) + Math.random() * 2.5,
        ),
        Sponsorship: Math.floor(
          500 + 150 * Math.cos((i / 360) * 2 * Math.PI) + Math.random() * 5,
        ),
        'Ad revenue': Math.floor(
          300 + 100 * Math.sin((i / 360) * 4 * Math.PI) + Math.random() * 10,
        ),
      }))

      return (
        <div
          style={{
            height: 300,
            width: '100%',
            display: 'flex',
          }}
        >
          <LineChart
            data={TEST_DATA}
            xKey="ts"
            yKeys={['Subscriptions', 'Sponsorship', 'Ad revenue']}
            xFormat={(x) => format(new Date(x), 'HH:mm')}
            yFormat={(y) => `$${Math.round(y).toString()}`}
          />
        </div>
      )
    },
  },
]
