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

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

    const {
        lineSize,
        index, edge,
        setListW,
        animatedStyles,
        onClick,
    } = _hooks.useData(props);


    const list: number[] = [];

    return <Basic.View l={props.l} r={props.r} b={props.b} t={props.t} pv={props.pv} style={props.style}>
        <Basic.View style={css.rowStart}>
            {
                props.list.map((item, key) => {
                    const isSelect = index === key;
                    return <Basic.View key={key} style={[css.colStartCenter]}
                                       onLayer={event => {
                                           list.push(event.nativeEvent.layout.width);
                                           if (list.length === props.list.length) setListW(list);
                                       }}
                                       onPress={() => {
                                           onClick(key);
                                           props.setIndex(key);
                                       }}
                    >
                        {
                            typeof item === "string" ?
                                <Basic.Text text={item} lineHeight={30} weight={'bold'} textAlign={'center'}
                                            size={props.size ?? 14} pr={edge / 2} pl={edge / 2}
                                            width={props.itemWidth}
                                            color={isSelect ? (props.selectColor ?? css.font.black) : (props.color ?? css.font.color)}/> :
                                item
                        }

                    </Basic.View>
                })
            }
        </Basic.View>
        <Animated.View style={[
            props.selectStyle ? props.selectStyle : styles.line,
            {
                width: lineSize,
            },
            animatedStyles
        ]}/>
    </Basic.View>
}


const styleSheet = (css: ThemeCss) => StyleSheet.create({
    line: {
        height: 4,
        backgroundColor: css.main,
        borderWidth: 0.5,
        borderRadius: 10,
        borderColor: 'rgba(0,0,0,0)',
        overflow: "hidden"
    }
});


export default CompositeMenu