import { select } from '@storybook/addon-knobs';
import React from 'react';
import Panel from '.';
import { Box, Stack } from '../Layout/index';
import Select from '../Select';
import { Text } from '../Text';

export default {
  title: 'Components|Panel',
  component: Panel,
};

export const index = () => {
  const intent = select('intent', ['warning', 'neutral', 'info'], 'neutral');
  const appearance = select('appearance', ['default', 'secondary'], 'default');
  return (
    <Box backgroundColor="backgroundAccent" p="large">
      <Stack maxWidth="450px">
        <Panel appearance={appearance} intent={intent}>
          <Box p="small">I am content!</Box>
        </Panel>
        <Panel
          appearance={appearance}
          header={
            <>
              <Text>Some header</Text>
              <Select height="30px" appearance="borderless">
                <option>Select an option</option>
                <option>Some option</option>
                <option>Another option</option>
                <option>Another longer option</option>
              </Select>
            </>
          }
          intent={intent}
        >
          <Box p="small">I am content!</Box>
        </Panel>
        <Panel
          appearance={appearance}
          header={
            <>
              <Text>Some header</Text>
            </>
          }
          info="Hello, I am an info icon!"
          intent={intent}
        >
          <Box p="small">I am content!</Box>
        </Panel>
        <Panel appearance={appearance} info="Hello, I am an info icon!" intent={intent}>
          <Box p="small">I am content!</Box>
        </Panel>
        <Panel
          loading={true}
          appearance={appearance}
          info="Hello, I am an info icon!"
          intent={intent}
        >
          <Box p="small">I am content!</Box>
        </Panel>
      </Stack>
    </Box>
  );
};

index.background = 'Light Neutral 3';
index.parameters = {
  background: 'Light Neutral',
};