import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { BrowserRouter, Link } from 'react-router-dom';
import { Details } from './Details';
import { Button } from '../Button/Button';
import { Box } from '../Box/Box';
import { DetailsSummary } from './DetailsSummary';
import { useOpenClose } from '../../hooks/useOpenClose/useOpenClose';

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

# Details

The `<details>` tag specifies additional details that the user can open and close on demand. This custom component
provides a React implementation of this semantic HTML with controlled state.

It includes a child component for the details summary `<Details.Summary />`. The details themselves can be included as children
inside `<Details>` typically following the `<Details.Summary>`.

NOTE: for a custom implementation of this component see the [accordion](/?path=/story/components-accordion-overview--default-story)

<Canvas withSource="open">
  <Story name="Basic Usage">
    {() => {
      const { isOpen, handleToggle } = useOpenClose();
      return (
        <Details isOpen={isOpen}>
          <Details.Summary
            isDetailsOpen={isOpen}
            onToggle={handleToggle}
            display="inline"
          >
            What is Palmetto's Mission?
          </Details.Summary>
          <Box padding="md 0" gap="sm">
            <Box fontSize="lg" as="h4">
              Leading the World Towards a Clean Energy Future
            </Box>
            <Box as="p">
              We are on a mission to stop climate change before we reach an
              irreversible tipping point. Yes, this requires large shifts by
              entire nations and entire populations. It requires urgency and
              change on a massive scale. But technological advancements have put
              it within reach.
            </Box>
          </Box>
        </Details>
      );
    }}
  </Story>
</Canvas>

## Props

<ArgsTable of={Details} />

## Custom `<summary>` Appearance.

Add any custom JSX to the `<Details.Summary>` element to customize your summary trigger.

<Canvas withSource="open">
  <Story name="With custom summary">
    {() => {
      const { isOpen, handleToggle } = useOpenClose();
      return (
        <Details isOpen={isOpen}>
          <Details.Summary
            fontWeight="bold"
            color="primary-500"
            hover={{ color: 'primary-600' }}
            isDetailsOpen={isOpen}
            onToggle={handleToggle}
          >
            Do you have my reservation?
          </Details.Summary>
          <Box padding="md 0" as="p">
            See, you know how to take the reservation, you just don't know how
            to hold the reservation and that's really the most important part of
            the reservation, the holding. Anybody can just take them.
          </Box>
        </Details>
      );
    }}
  </Story>
</Canvas>

## Start Opened

Render the component with the details expanded by setting `isOpen` to `true`.

<Canvas withSource="open">
  <Story name="Opened">
    {() => {
      const { isOpen, handleToggle } = useOpenClose({ defaultIsOpen: true });
      return (
        <Details isOpen={isOpen}>
          <Details.Summary
            fontWeight="bold"
            color="primary-500"
            hover={{ color: 'primary-600' }}
            isDetailsOpen={isOpen}
            onToggle={handleToggle}
          >
            Do you have my reservation?
          </Details.Summary>
          <Box padding="md 0" as="p">
            See, you know how to take the reservation, you just don't know how
            to hold the reservation and that's really the most important part of
            the reservation, the holding. Anybody can just take them.
          </Box>
        </Details>
      );
    }}
  </Story>
</Canvas>

## Sub-Components

### `<Details.Summary>`

## Props

<ArgsTable of={DetailsSummary} />
