import * as React from "react";
import {StyleSheet} from "react-native";
import Basic from "../../basicPage";
import app, {ThemeCss} from "../../app";
import {IProps} from "./list";


const CompositeList: React.FC<IProps> = (props) => {
    const css = app.theme.useGet<ThemeCss>();
    const styles = styleSheet(css);

    const titleWidth = css.width / 2;

    //  icon
    let iconView = undefined;
    if (typeof props.icon === 'string') iconView = <Basic.View style={[css.colCenter]} r={15}>
        <Basic.Icon name={props.icon} size={props.iconSize} color={props.iconColor}/>
    </Basic.View>
    else if (typeof props.icon === 'object') iconView = <Basic.View r={15}>{props.icon}</Basic.View>;

    //  右箭头
    let rightIcon = undefined;
    if (props.isRightIcon) rightIcon =
        <Basic.Icon name={props.rightIcon ?? 'icon-arrow-right'}
                    size={props.rightIconSize ?? 13}
                    color={props.rightIconColor} l={10}/>
    //  右文字
    let rightName = undefined;
    if (typeof props.rightName === 'string') rightName =
        <Basic.Text text={props.rightName ?? ''}
                    size={props.rightNameSize}
                    color={props.rightNameColor}
                    weight={props.rightNameIsWeight ? 'bold' : 'normal'}/>
    else if (typeof props.rightName === 'object') rightName =
        <Basic.View>{props.rightName}</Basic.View>

    return <Basic.View style={[css.rowBetweenCenter, styles.listStyle, props.style]} height={props.height}
                       m={props.m} p={props.p} l={props.l} r={props.r} t={props.t} b={props.b}
                       mt={props.mt} mb={props.mb} ml={props.ml} mr={props.mr} mh={props.mh} mv={props.mv}
                       pt={props.mt} pb={props.mb} pl={props.ml} pr={props.mr} ph={props.mh} pv={props.mv}
                       onPress={props.onPress}>
        <Basic.View style={[css.rowStartCenter]}>
            {iconView}
            <Basic.Text text={props.title} size={props.titleSize} weight={props.titleIsWeight ? 'bold' : 'normal'}
                        color={props.titleColor} width={titleWidth} line={1}/>
        </Basic.View>
        <Basic.View style={[css.rowEndCenter]}>
            {rightName}
            {rightIcon}
        </Basic.View>
    </Basic.View>
}

const styleSheet = (css: ThemeCss) => StyleSheet.create({
    listStyle: {
        paddingHorizontal: 15,
        height: 50,
    }
});

export default CompositeList