import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';

import CreateCard from './CreateCard';

const meta: Meta<typeof CreateCard> = {
  title: 'Create/CreateCard',
  component: CreateCard,
};
export default meta;

type Story = StoryObj<typeof CreateCard>;

const PlaceholderContent = ({ text }: { text: string }) => (
  <div style={{ minHeight: 80, padding: '16px' }}>
    <p>{text}</p>
  </div>
);

const HeaderContent = () => (
  <>
    <button
      style={{
        padding: '4px 12px',
        borderRadius: 8,
        background: '#333',
        color: '#fff',
        border: 'none',
      }}
    >
      A
    </button>
    <button
      style={{
        padding: '4px 12px',
        borderRadius: 8,
        background: '#333',
        color: '#fff',
        border: 'none',
      }}
    >
      B
    </button>
    <button
      style={{
        padding: '4px 12px',
        borderRadius: 8,
        background: '#333',
        color: '#fff',
        border: 'none',
      }}
    >
      C
    </button>
    <button
      style={{
        padding: '4px 12px',
        borderRadius: 8,
        background: '#333',
        color: '#fff',
        border: 'none',
      }}
    >
      D
    </button>
  </>
);

export const AlwaysOpen: Story = {
  render: () => (
    <CreateCard title='Always Open Card' collapsible={false}>
      <PlaceholderContent text='This is the card content area.' />
    </CreateCard>
  ),
};

function CollapsedControlledDemo() {
  const [expanded, setExpanded] = useState(true);
  return (
    <CreateCard
      title='Collapsible Card'
      expanded={expanded}
      setExpanded={setExpanded}
      collapsible
    >
      <PlaceholderContent text='This is the card content area.' />
    </CreateCard>
  );
}

export const CollapsibleControlled: Story = {
  render: () => <CollapsedControlledDemo />,
};

export const CustomHeader: Story = {
  render: () => (
    <CreateCard
      title={
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontWeight: 600 }}>Custom Header</span>
          <span style={{ fontSize: 12, color: '#aaa', marginLeft: 8 }}>
            [subtitle]
          </span>
        </div>
      }
      collapsible={false}
    >
      <PlaceholderContent text='This is the card content area.' />
    </CreateCard>
  ),
};

function HeaderContentAlwaysVisibleDemo() {
  const [expanded, setExpanded] = useState(true);
  return (
    <CreateCard
      title='Header Content (Always Visible)'
      headerContent={<HeaderContent />}
      expanded={expanded}
      setExpanded={setExpanded}
      collapsible
    >
      <PlaceholderContent text='Note that the header height is maintained when expanded or collapsed.' />
    </CreateCard>
  );
}

export const HeaderContentAlwaysVisible: Story = {
  render: () => <HeaderContentAlwaysVisibleDemo />,
};

function HeaderContentOnlyWhenExpandedDemo() {
  const [expanded, setExpanded] = useState(true);
  return (
    <CreateCard
      title='Header Content (Only when expanded)'
      headerContent={<HeaderContent />}
      expanded={expanded}
      setExpanded={setExpanded}
      headerContentHidden={!expanded}
      collapsible
    >
      <PlaceholderContent text='Note that the header now changes height when expanded or collapsed.' />
    </CreateCard>
  );
}

export const HeaderContentOnlyWhenExpanded: Story = {
  render: () => <HeaderContentOnlyWhenExpandedDemo />,
};

export const NoHeader: Story = {
  render: () => {
    return (
      <CreateCard>
        <PlaceholderContent text='Entirety of this card is the content.' />
      </CreateCard>
    );
  },
};