import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import {useSDKConfig} from '../../contexts/SDKConfigContext';
import {Colors, fontSz, hp, ms} from '../../utils';
import {CustomPressable} from '../Button';
import {Text} from '../Text';

export const Tab = ({
  active,
  label,
  onPress,
  unstyled,
  twoPane,
}: {
  active: boolean;
  label: string;
  onPress: () => void;
  unstyled: boolean;
  twoPane?: boolean;
}) => {
  const {primaryColor} = useSDKConfig();
  switch (unstyled) {
    case true:
      return (
        <CustomPressable
          style={[
            styles.pill,
            {
              backgroundColor: Colors.transparent,
              width: twoPane ? '50%' : '33%',
              height: '100%',
              borderRadius: ms(0),
              borderBottomWidth: ms(2),
              borderBottomColor: active ? primaryColor : Colors.transparent,
            },
          ]}
          onPress={onPress}>
          <Text
            style={[
              {
                color: active ? primaryColor : Colors.tabInactiveText,
                fontSize: fontSz(14),
                lineHeight: fontSz(14 * 1.72),
              },
            ]}
            fontWeight={'500'}
            fontFamily={'Gordita-Medium'}
            text={label.toUpperCase()}
          />
        </CustomPressable>
      );
    case false:
      return (
        <CustomPressable
          style={[
            styles.pill,
            {
              backgroundColor: active ? Colors.white : Colors.tabBg,
              width: twoPane ? '50%' : '33%',
              height: '100%',
            },
          ]}
          onPress={onPress}>
          <Text
            style={[
              {
                color: active ? primaryColor : Colors.tabInactiveText,
                fontSize: fontSz(14),
              },
            ]}
            fontWeight={'500'}
            fontFamily={'Gordita-Medium'}
            text={label}
          />
        </CustomPressable>
      );

    default:
      return null;
  }
};

const ThreePaneToggleTabs = ({
  selectedTab,
  currentTab,
  firstLabel = '',
  secondLabel = '',
  thirdLabel = '',
  unstyled = false,
}: {
  selectedTab: any;
  currentTab?: 0 | 1 | 2;
  firstLabel?: string;
  secondLabel?: string;
  thirdLabel?: string;
  unstyled?: boolean;
}) => {
  const [first, setFirst] = useState<boolean>(true);
  const [second, setSecond] = useState<boolean>(false);
  const [third, setThird] = useState<boolean>(false);

  useEffect(() => {
    setFirst(currentTab === 0 ? true : false);
    setSecond(currentTab === 1 ? true : false);
    setThird(currentTab === 2 ? true : false);
    selectedTab(currentTab);
  }, [currentTab]);

  const toggle = (e: 0 | 1 | 2) => {
    if (e === 0) {
      selectedTab(0);
      setFirst(true);
      setSecond(false);
      setThird(false);
    } else if (e === 1) {
      selectedTab(1);
      setFirst(false);
      setSecond(true);
      setThird(false);
    } else if (e === 2) {
      selectedTab(2);
      setFirst(false);
      setSecond(false);
      setThird(true);
    } else {
      return;
    }
  };

  return (
    <View
      style={[
        styles.container,
        {
          width: '100%',
          backgroundColor: unstyled ? Colors.transparent : Colors.tabBg,
          paddingVertical: ms(4),
          marginBottom: ms(2.5),
        },
      ]}>
      {/* tabs */}
      <Tab
        unstyled={unstyled}
        active={first}
        label={firstLabel}
        onPress={() => toggle(0)}
      />
      <Tab
        unstyled={unstyled}
        active={second}
        label={secondLabel}
        onPress={() => toggle(1)}
      />
      <Tab
        unstyled={unstyled}
        active={third}
        label={thirdLabel}
        onPress={() => toggle(2)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: ms(4),
    height: hp(45),
    borderRadius: ms(8),
  },
  pill: {
    borderRadius: ms(8),
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ThreePaneToggleTabs;