/* eslint-disable react-hooks/rules-of-hooks */
import React, {useRef, useState} from 'react';
import {Pressable, StyleSheet, View} from 'react-native';
import Animated from 'react-native-reanimated';
import {Meta, StoryObj} from '@storybook/react';
import {Typography} from '@components/_core/Typography';
import {SPACING, useTheme} from '@shared/theme';
import {windowDimensions} from '@shared/constants';

import {RenderSceneProps, Tabs, TabsRef, useAnimatedTabs} from './index';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: -SPACING.x2,
  },
  tabContent: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: SPACING.x2,
  },
  scrollableContent: {
    height: windowDimensions.height / 3,
    width: '100%',
    textAlign: 'center',
    textAlignVertical: 'center',
  },
});

const ScrollableContent = () => {
  const {theme} = useTheme();
  const {scrollHandler} = useAnimatedTabs();

  return (
    <Animated.ScrollView onScroll={scrollHandler}>
      <Typography style={styles.scrollableContent}>
        Scrollable content
      </Typography>
      <Typography
        style={[styles.scrollableContent, {backgroundColor: theme.primary}]}>
        Scrollable content
      </Typography>
      <Typography style={styles.scrollableContent}>
        Scrollable content
      </Typography>
    </Animated.ScrollView>
  );
};

const meta: Meta<typeof Tabs> = {
  title: 'HuGo/Tabs',
  argTypes: {fullWidth: {control: 'boolean'}},
  component: Tabs,
};

type Story = StoryObj<typeof Tabs>;

export const TabsComponent: Story = {
  render: args => {
    const tabsRef = useRef<TabsRef>(null);
    const [routes, setRoutes] = useState([
      {key: 'first', label: 'First'},
      {key: 'second', label: 'Second', badge: true},
      {key: 'third', label: 'This is the third tab'},
      {key: 'fourth', label: 'Fourth'},
      {key: 'anotherTab', label: 'This is the last tab'},
    ]);

    const renderScene = (props: RenderSceneProps) => {
      switch (props.route.key) {
        case 'third':
          return <ScrollableContent />;
        default:
          return (
            <View style={styles.tabContent}>
              <Typography variant="m" weight="semiBold">
                {props.route.label}
              </Typography>
              <Pressable onPress={() => tabsRef.current?.goToIndex(1)}>
                <Typography>Go to Second tab</Typography>
              </Pressable>
            </View>
          );
      }
    };

    const onTabChange = (key: string) => {
      setRoutes(current =>
        current.map(tab =>
          tab.key === key
            ? {
                ...tab,
                badge: false,
              }
            : tab,
        ),
      );
    };

    return (
      <View style={styles.container}>
        <Tabs
          {...args}
          ref={tabsRef}
          routes={routes}
          renderScene={renderScene}
          onTabChange={onTabChange}
          lazy={false}
          withDivider
        />
      </View>
    );
  },
};

export default meta;