import React, { useEffect } from 'react';
import { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Colors, ms } from '../../utils';
import { Tab } from './threePane';

const ToggleTabs = ({
  selectedTab,
  currentTab,
  firstLabel = '',
  secondLabel = '',
  unstyled = false,
  onPress,
}: {
  selectedTab: any;
  currentTab?: 0 | 1;
  firstLabel?: string;
  secondLabel?: string;
  unstyled?: boolean;
  onPress: (data: 0 | 1) => void;
}) => {
  const [first, setFirst] = useState(true);
  const [second, setSecond] = useState(false);

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

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

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: unstyled ? Colors.transparent : Colors.tabBg,
          width: '100%',
          height: ms(50),
        },
      ]}
    >
      <Tab
        twoPane={true}
        unstyled={unstyled}
        active={first}
        label={firstLabel}
        onPress={() => {
          toggle(0);
          //@ts-ignore
          onPress(0);
        }}
      />
      <Tab
        twoPane={true}
        unstyled={unstyled}
        active={second}
        label={secondLabel}
        onPress={() => {
          toggle(1);
          //@ts-ignore
          onPress(1);
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: ms(5),
    paddingVertical: ms(5),
    height: ms(50),
    borderRadius: ms(4),
  },
  pill: {
    borderRadius: ms(4),
    justifyContent: 'center',
    alignItems: 'center',
    width: '50%',
    height: '100%',
  },
  title: {
    color: 'white',
  },
});

export default ToggleTabs;