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

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

const meta = {
  title: 'HuGo/Header/HeaderProfile',
  component: HeaderProfile,
} satisfies Meta<typeof HeaderProfile>;

export default meta;

type HeaderProfileStory = StoryObj<typeof HeaderProfile>;
export const ProfileBasic: HeaderProfileStory = {
  args: {
    onDotsVerticalPress: () => {},
  },
};

export const ProfileWithChips: HeaderProfileStory = {
  args: {
    onDotsVerticalPress: () => {},
  },
  render: args => (
    <HeaderProfile {...args}>
      <HeaderProfile.SubheaderChips
        list={[
          {id: 1, label: 'All'},
          {id: 2, label: 'Active'},
          {id: 3, label: 'Completed'},
        ]}
        selected={1}
        onItemPress={() => {}}
      />
    </HeaderProfile>
  ),
};

export const ProfileWithSearch: HeaderProfileStory = {
  args: {
    onDotsVerticalPress: () => {},
  },
  render: args => (
    <HeaderProfile {...args}>
      <HeaderProfile.SubheaderSearch
        placeholder="Search..."
        value=""
        onChangeText={() => {}}
      />
    </HeaderProfile>
  ),
};

export const ProfileWithTabs: HeaderProfileStory = {
  args: {
    onDotsVerticalPress: () => {},
  },
  render: args => (
    <HeaderProfile {...args}>
      <HeaderProfile.SubheaderTabs
        routes={[
          {key: '1', label: 'Tab 1'},
          {key: '2', label: 'Tab 2'},
          {key: '3', label: 'Tab 3'},
        ]}
        renderScene={() => null}
        initialIndex={0}
      />
    </HeaderProfile>
  ),
};
