import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Toggle, Typography} from '@components';
import {useTimeOffPanelStyle} from '@modules/timeOff/hooks';
import {useTheme} from '@shared/theme';

import {SellBalanceContent} from './components/SellBalanceContent';
import {useSellBalanceForm} from './hooks/useSellBalanceForm';
import {styles} from './styles';

interface Props {
  isLoading: boolean;
  isCollapsed: boolean;
  currentBalance: number;
  minimumBalance: number;
  allowanceAmount: number;
  allowBalanceSaleBrazil: boolean;
  timeRequested: {
    total: number;
    inTime: number;
    inMoney: number;
  };
}

export function SellBalance({
  isLoading,
  isCollapsed,
  timeRequested,
  currentBalance,
  minimumBalance,
  allowanceAmount,
  allowBalanceSaleBrazil,
}: Props) {
  const {inTime} = timeRequested;
  const {theme} = useTheme();
  const {t} = useTranslation();
  const panelStyle = useTimeOffPanelStyle();

  const {isSellBalanceEnabled, balanceAvailableToSell, options, onToggle} =
    useSellBalanceForm({
      inTime,
      currentBalance,
      minimumBalance,
      allowanceAmount,
      allowBalanceSaleBrazil,
    });

  return (
    <View style={[panelStyle, styles.container]}>
      <View style={styles.header}>
        <View style={styles.title}>
          <Typography
            weight="regular"
            color={
              isSellBalanceEnabled
                ? theme.text.neutral.default
                : theme.text.neutral.disabled
            }
            variant="s"
            numberOfLines={1}>
            {t('time_off.make_request_in_money')}
          </Typography>
          <Typography
            color={
              isSellBalanceEnabled
                ? theme.text.neutral.lighter
                : theme.text.neutral.disabled
            }
            variant="xs"
            numberOfLines={5}>
            {t('time_off.request_in_money_description')}
          </Typography>
        </View>
        <Toggle value={isSellBalanceEnabled} onToggle={onToggle} />
      </View>
      {isSellBalanceEnabled && (
        <SellBalanceContent
          options={options}
          isLoading={isLoading}
          isCollapsed={isCollapsed}
          balanceAvailableToSell={balanceAvailableToSell}
        />
      )}
    </View>
  );
}