import React from 'react';
import {Meta, StoryObj} from '@storybook/react';
import {
  IconArrowLeft,
  IconDotsVertical,
  IconX,
} from '@tabler/icons-react-native';
import {IconButton} from '@components/_HuGo/Button';

import {HeaderSection} from '../HeaderSection';

const meta = {
  title: 'HuGo/Header/HeaderSection',
  component: HeaderSection,
  args: {
    title: 'Title',
    hasTopSafeArea: false,
  },
} satisfies Meta<typeof HeaderSection>;

export default meta;

type HeaderSectionStory = StoryObj<typeof HeaderSection>;

export const SectionBasic: HeaderSectionStory = {
  args: {
    title: 'A really long long title that should be truncated',
    hasTopSafeArea: false,
  },
  render: args => (
    <HeaderSection
      {...args}
      leftComponent={
        <IconButton
          Icon={IconArrowLeft}
          onPress={() => {}}
          variant="tertiary"
        />
      }
      rightComponent={
        <>
          <IconButton
            Icon={IconDotsVertical}
            onPress={() => {}}
            variant="tertiary"
          />
          <IconButton Icon={IconX} onPress={() => {}} variant="tertiary" />
        </>
      }
    />
  ),
};

export const SectionWithChips: HeaderSectionStory = {
  args: {
    title: 'Title',
    hasTopSafeArea: false,
  },
  render: args => (
    <HeaderSection
      {...args}
      leftComponent={
        <IconButton
          Icon={IconArrowLeft}
          onPress={() => {}}
          variant="tertiary"
        />
      }
      rightComponent={null}>
      <HeaderSection.SubheaderChips
        list={[
          {id: 1, label: 'All'},
          {id: 2, label: 'Active'},
          {id: 3, label: 'Completed'},
        ]}
        selected={1}
        onItemPress={() => {}}
      />
    </HeaderSection>
  ),
};

export const SectionWithSearch: HeaderSectionStory = {
  args: {
    title: 'Title',
    hasTopSafeArea: false,
  },
  render: args => (
    <HeaderSection
      {...args}
      leftComponent={
        <IconButton
          Icon={IconArrowLeft}
          onPress={() => {}}
          variant="tertiary"
        />
      }
      rightComponent={null}>
      <HeaderSection.SubheaderSearch
        placeholder="Search..."
        value=""
        onChangeText={() => {}}
      />
    </HeaderSection>
  ),
};

export const SectionWithTabs: HeaderSectionStory = {
  args: {
    title: 'Title',
    hasTopSafeArea: false,
  },
  render: args => (
    <HeaderSection
      {...args}
      leftComponent={
        <IconButton
          Icon={IconArrowLeft}
          onPress={() => {}}
          variant="tertiary"
        />
      }
      rightComponent={null}>
      <HeaderSection.SubheaderTabs
        routes={[
          {key: '1', label: 'Tab 1'},
          {key: '2', label: 'Tab 2'},
          {key: '3', label: 'Tab 3'},
        ]}
        renderScene={() => null}
        initialIndex={0}
      />
    </HeaderSection>
  ),
};
