import React from 'react';
import { Text, View } from 'react-native';
import TouchableOpacity from '../TouchableOpacity';
import Divider from '../Divider';
import { getLabelId, getLabelType } from '../LabelRow/utils';
import { safeWithTheme } from '../../branding';
import type { ThemeProps } from '../../branding/hoc/types';
import Checkbox from '../../componentsDS/Checkbox';
import styles, { type Styles } from './styles';

export interface LabelId {
    vendorId?: string | number;
    subaccountId?: string | number;
}

export interface LabelVendor {
    name: string;
    id?: LabelId;
}

export interface Label {
    id: LabelId;
    name: string;
    __typename?: string;
    type?: string;
    vendor?: LabelVendor;
}

interface LabelRowProps {
    label: Label;
    checked: boolean;
    onPress: (label: Label) => void;
}

export const LabelRow = ({
    label,
    checked,
    onPress,
    theme
}: LabelRowProps & ThemeProps) => {
    const type = getLabelType(label);
    const handlePress = () => onPress(label);
    const themeStyles = styles[theme] as unknown as Styles;

    return (
        <View>
            <TouchableOpacity
                testID={getLabelId(label)}
                style={themeStyles.sectionItem}
                onPress={handlePress}
            >
                <View>
                    <Text>
                        <Text style={themeStyles.title} numberOfLines={1}>
                            {label.name}
                        </Text>
                        <Text style={themeStyles.labelId}>
                            ({label.id?.subaccountId || label.id?.vendorId})
                        </Text>
                    </Text>
                    <Text style={themeStyles.secondary}>
                        <Text style={themeStyles.secondaryText}>
                            {type}
                            {label.vendor ? ` • ${label.vendor?.name} ` : ''}
                        </Text>
                        {label.vendor && (
                            <Text style={themeStyles.secondaryText}>
                                ({label.vendor?.id?.vendorId})
                            </Text>
                        )}
                    </Text>
                </View>
                <Checkbox checked={checked} onChange={handlePress} />
            </TouchableOpacity>
            <Divider />
        </View>
    );
};

export default safeWithTheme(LabelRow);