import { Duration } from  './Duration';
import { Box } from '../Box/Box';
import { Badge } from '../Badge/Badge';
import { Alert } from '../Alert/Alert';
import { Popover } from '../Popover/Popover';
import { Button } from '../Button/Button';
import { useState, useEffect } from 'react';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';

<Meta title="Components/Duration/Overview" component={Duration} />

# Duration

Use 'Duration' to display a time span in a friendly human readable format. The `Duration` component handles converting 
between different time units at defined intervals, including rounding, and displaying the result with an appropriate label.

<Canvas withSource="open">
  <Story name="Examples">
    <Box gap="xs">
      <Duration milliseconds={1000} />
      <Duration milliseconds={60000} />
      <Duration milliseconds={7200000} />
      <Duration milliseconds={86400000} />
    </Box>
  </Story>
</Canvas>

## Props

<ArgsTable of={Duration} />

## Switching Units

The intervals at which the `Duration` component switches between time units can be configured using the 
`displayMinutes`, `displayHours`, and `displayDays` properties.

<Canvas withSource="open">
  <Story name="Switching Units">
    <Box gap="xs">
      <Duration milliseconds={3600000} displayHours={7200000} />
      <Duration milliseconds={3600000} displayHours={3600000} /> 
    </Box>
  </Story>
</Canvas>  

## Rounding

By default the `Duration` component will round up the time span to the nearest whole unit. This can be configured using the
`roundUp` property.

<Canvas withSource="open">
  <Story name="Rounding">
    <Box gap="xs">
      <p>Up: <Duration milliseconds={60001} roundUp={true} /> </p>
      <p>Down: <Duration milliseconds={60001} roundUp={false} /> </p>
    </Box>
  </Story>
</Canvas> 

## With Other Components

Use the `Duration` component with other stylized components to display a time span in a friendly human readable format.

<Canvas withSource="open">
  <Story name="Composition">
    <Box direction="row" gap="sm">
      <Badge message={<Duration milliseconds={60001} />} variant="default"/>
      <Badge message={<Duration milliseconds={3600000} />} variant="warning" />
      <Badge message={<Duration milliseconds={86500000} />} variant="danger"/>
    </Box>
  </Story>
</Canvas> 

<Canvas>
  <Story name="Hover" withSource="open">
    {() => {
      const [isPopoverOpen, setPopoverOpen] = useState(false);
      const popoverContent = (
        <>
          <p>
            <Duration milliseconds={86500000} displayMinutes={10000000000} /> or <Duration milliseconds={86500000} displayHours={10000000000} /> or <Duration milliseconds={86500000} displayDays={10000000000}/>
          </p>
        </>
      );
      useEffect(() => {
        console.log(isPopoverOpen);
      }, [isPopoverOpen]);
      return (
        <Box display="inline-block">
          <Popover
            content={popoverContent}
            isOpen={isPopoverOpen}
            placement="right-start"
            contentContainerProps={{
              background: 'secondary',
              color: 'white',
            }}
            withPortal
            portalTarget={document.body}
          >
            <Box padding="sm">
              <Badge display="" onMouseOver={() => setPopoverOpen(true)} onMouseOut={() => setPopoverOpen(false)} message={<Duration milliseconds={86500000} />} variant="default"/>
            </Box>
          </Popover>
        </Box>
      );
    }}
  </Story>
</Canvas>

