import React, { useCallback, useRef, useState } from 'react';
import { ScrollView } from 'react-native';
import { SBox } from '../s-components/layout/s-box';
import { STabTitle } from '../s-components/s-tab-title';
import { SRow } from '../s-components/layout/s-row';
import { SCol } from '../s-components/layout/s-col';
import { SLine } from '../s-components/s-line';
import { theme } from '../../app/theme';
import { Touchable } from './touchable';

type TProps = {
  active?: string;
  tabs: {
    id: string;
    name: string;
  }[];
  onSelect: (id: string, name?: string) => void;
  light?: boolean;
  horizontalOffset?: number;
  tabGap?: number;
  withScroll?: boolean;
  // testID?: string;
};

export const Tabs: React.FC<TProps> = props => {
  const {
    withScroll,
    active,
    onSelect,
    light,
    tabs,
    horizontalOffset,
    tabGap,
  } = props;
  const [pressed, setPressed] = useState(null);
  const scrollView = useRef<ScrollView>(null);
  const pressedItem = useRef<string | null>(null);

  const getTabElement = useCallback(
    ({
      id,
      name,
      isFirst,
      isLast,
    }: {
      id: string;
      name: string;
      isFirst?: boolean;
      isLast?: boolean;
    }) => {
      return (
        <Touchable
          testID="tabs"
          onPress={() => {
            if (active !== id) {
              onSelect(id, name);
              if (isFirst) {
                scrollView.current!.scrollTo({ x: 0, y: 0, animated: true });
              }
              if (isLast) {
                scrollView!.current!.scrollToEnd();
              }
            }
          }}
          onPressIn={() => {
            //@ts-ignore
            setPressed(id);
            pressedItem.current = id;
          }}
          onPressOut={() => {
            setPressed(null);
            pressedItem.current = null;
          }}
          // TODO learn it https://pusher.com/tutorials/accessible-react-native
          // accessible
          // accessibilityLabel={`Activate ${name} tab`}
          // accessibilityRole="tab switcher"
          // accessibilityHint={`Activate ${name} tab`}
          pressDelayDuration={150}
        >
          <SBox>
            <SBox position="relative" pb={10}>
              {active === id ? (
                <SLine variant={light ? 'light' : 'dark'} bottom={0} />
              ) : null}
              <STabTitle
                color={
                  active !== id
                    ? pressed === id || pressedItem.current === id
                      ? light
                        ? theme.colorsRgba.dailyDigestTabPressed
                        : 'kimberly'
                      : light
                      ? theme.colorsRgba.dailyDigestTab
                      : 'periwinkleGray'
                    : undefined
                }
                textAlign="center"
              >
                {name}
              </STabTitle>
            </SBox>
          </SBox>
        </Touchable>
      );
    },
    [active, onSelect, light]
  );

  const getScrollableTabs = useCallback(() => {
    return (
      <ScrollView
        showsHorizontalScrollIndicator={false}
        horizontal
        ref={scrollView}
        contentContainerStyle={{
          paddingRight: horizontalOffset,
          paddingLeft: horizontalOffset,
        }}
      >
        {tabs.map((item, index) => {
          const { id, name } = item;

          return (
            <SBox ml={index === 0 ? 0 : tabGap} key={id}>
              {getTabElement({
                id,
                name,
                isFirst: index === 0,
                isLast: index === tabs.length - 1,
              })}
            </SBox>
          );
        })}
      </ScrollView>
    );
  }, [tabs, horizontalOffset, tabGap]);

  const getStaticTabs = useCallback(() => {
    return (
      <SRow width={1} px={horizontalOffset}>
        {tabs.map(({ id, name }) => (
          <SCol alignItems="center" flex={1} key={id}>
            {getTabElement({ id, name })}
          </SCol>
        ))}
      </SRow>
    );
  }, [tabs, horizontalOffset]);

  return withScroll ? getScrollableTabs() : getStaticTabs();
};

Tabs.defaultProps = {
  light: false,
  // paddingX: 0,
  tabGap: 0,
};