import React from 'react';
import { useTheme } from '../../branding';
// @ts-ignore
import SwitchSelector from 'react-native-switch-selector';
import { formatMessage } from '../../i18n';
import styles from './styles';

export interface SwitchSelectorOption {
    label: string;
    value: string;
}

export interface SwitchSelectorComponentProps {
    onSwitchSelectorPress?: (val: string) => void;
    options?: SwitchSelectorOption[];
    initialSelectedIndex?: number;
    hasPadding?: boolean;
    valuePadding?: number;
    height?: number;
    borderColor?: string;
    style?: any;
    textStyle?: any;
    textContainerStyle?: any;
    selectedTextContainerStyle?: any;
    selectedTextStyle?: any;
    textColor?: string;
    selectedColor?: string;
    buttonColor?: string;
    backgroundColor?: string;
    value?: string;
}

export const SwitchSelectorComponent = (
    props: SwitchSelectorComponentProps
) => {
    const { colors, typography, theme } = useTheme();
    const themeStyles = styles[theme];
    const {
        onSwitchSelectorPress,
        options = [],
        hasPadding = true,
        initialSelectedIndex = 0,
        valuePadding = 0,
        height = 35,
        borderColor = colors.midnight850,
        style = null,
        textStyle = typography.label3DS,
        textContainerStyle = typography.label3DS,
        selectedTextContainerStyle = typography.label3DS,
        selectedTextStyle = typography.label3DS,
        textColor = colors.midnight200,
        selectedColor = colors.gray0,
        buttonColor = colors.midnight850,
        backgroundColor = colors.midnight950,
        value
    } = props;
    const initialIndex =
        options.findIndex(option => option.value === value) ||
        initialSelectedIndex;

    if (!options.length) {
        return null;
    }

    const translatedOptions = options.map(elem => ({
        ...elem,
        label: formatMessage(elem.label).toUpperCase()
    }));

    return (
        <SwitchSelector
            options={translatedOptions}
            value={value}
            initial={initialIndex}
            hasPadding={hasPadding}
            valuePadding={valuePadding}
            height={height}
            borderColor={borderColor}
            style={style || themeStyles.switchSelector}
            testID="switchSelector"
            textStyle={textStyle}
            textContainerStyle={[textContainerStyle, themeStyles.textContainer]}
            selectedTextContainerStyle={selectedTextContainerStyle}
            selectedTextStyle={selectedTextStyle}
            textColor={textColor}
            selectedColor={selectedColor}
            buttonColor={buttonColor}
            backgroundColor={backgroundColor}
            onPress={onSwitchSelectorPress}
        />
    );
};

export default SwitchSelectorComponent;