BackgroundJobsPanel

import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import React, { useState } from 'react'
import styled from 'styled-components'

import { BackgroundJobsList } from './BackgroundJobsList'
import { BackgroundJobsPanel, JobProps } from './BackgroundJobsPanel'

export default {
  title: 'Data Display（データ表示）/BackgroundJobsPanel',
  component: BackgroundJobsPanel,
  subcomponents: {
    BackgroundJobsList,
  },
}

export const PanelView: Story = () => {
  return (
    <List>
      <dt>Normal</dt>
      <dd>
        <BackgroundJobsPanel
          title="Jobs panel"
          jobs={[
            {
              id: 1,
              status: 'processing',
              name: 'Job 1',
              description: 'Processing',
              isCancelable: true,
            },
            {
              id: 2,
              status: 'downloading',
              name: 'Job 2',
              description: 'Downloading',
            },
            {
              id: 3,
              status: 'warning',
              name: 'Job 3',
              description: 'Warning',
            },
            {
              id: 4,
              status: 'error',
              name: 'Job 4',
              description: 'Error',
            },
            {
              id: 5,
              status: 'done',
              name: 'Job 5',
              description: 'Done',
            },
          ]}
          onClickExpansion={action('click expansion')}
          onClickCancelJob={action('click cancel')}
          onClickClose={action('click close')}
          isExpanded
        />
      </dd>
      <dt>Closed</dt>
      <dd>
        <BackgroundJobsPanel
          title="Closed panel"
          jobs={[
            {
              id: 1,
              status: 'processing',
              name: 'Job 1',
              description: 'Processing',
              isCancelable: true,
            },
          ]}
          onClickExpansion={action('click expansion')}
          onClickClose={action('click close')}
          isExpanded={false}
        />
      </dd>
      <dt>Toggle expansion</dt>
      <dd>
        <BackgroundJobsPanel
          title="can toggle by maximize/minimize button"
          jobs={[
            {
              id: 1,
              status: 'processing',
              name: 'Job 1',
              description: 'Processing',
              isCancelable: true,
            },
            {
              id: 2,
              status: 'downloading',
              name: 'Job 2',
              description: 'Downloading',
            },
            {
              id: 3,
              status: 'warning',
              name: 'Job 3',
              description: 'Warning',
            },
            {
              id: 4,
              status: 'error',
              name: 'Job 4',
              description: 'Error',
            },
            {
              id: 5,
              status: 'done',
              name: 'Job 5',
              description: 'Done',
            },
          ]}
          onClickExpansion={action('click expansion')}
          onClickCancelJob={action('click cancel')}
          onClickClose={action('click close')}
        />
      </dd>
      <dt>Long text ellipsis</dt>
      <dd>
        <BackgroundJobsPanel
          title="Ellipsis"
          jobs={[
            {
              id: 1,
              status: 'downloading',
              name: 'long long long long long long long long long long long long name',
              description:
                'long long long long long long long long long long long long description',
            },
            {
              id: 2,
              status: 'downloading',
              name: 'long long long long long long long long long long long long name',
              description:
                'long long long long long long long long long long long long description',
              isCancelable: true,
            },
          ]}
          onClickExpansion={action('click expansion')}
          onClickCancelJob={action('click cancel')}
          onClickClose={action('click close')}
        />
      </dd>
    </List>
  )
}
PanelView.storyName = 'panel'

export const ListView: Story = () => {
  const [panels, setPanels] = useState<
    Array<{
      seq: number
      jobs: JobProps[]
    }>
  >([])
  const [panelSeq, setPanelSeq] = useState(1)
  return (
    <Wrapper>
      <button
        onClick={() => {
          setPanels(
            panels.concat({
              seq: panelSeq,
              jobs: [
                {
                  id: 1,
                  status: 'processing',
                  name: 'Job 1',
                  description: 'Processing',
                  isCancelable: true,
                },
                {
                  id: 2,
                  status: 'downloading',
                  name: 'Job 2',
                  description: 'Downloading',
                },
              ],
            }),
          )
          setPanelSeq(panelSeq + 1)
        }}
      >
        Add panel
      </button>
      <BackgroundJobsList>
        {panels.map(({ seq, jobs }) => (
          <BackgroundJobsList.Item key={seq}>
            <BackgroundJobsPanel
              title={`Jobs panel ${seq}`}
              jobs={jobs}
              onClickClose={() => {
                setPanels(panels.filter((panel) => panel.seq !== seq))
              }}
            />
          </BackgroundJobsList.Item>
        ))}
      </BackgroundJobsList>
    </Wrapper>
  )
}
ListView.storyName = 'list'

const List = styled.dl`
  list-style: none;
  margin: 0;
  padding: 2rem;

  dt {
    margin-bottom: 1rem;
  }
  dd {
    margin: 0 0 2rem;
  }
`
const Wrapper = styled.div`
  padding: 2rem;
`