import React from "react";
import { StyleSheet, View, Text } from "react-native";
import {
    Menu,
    MenuItem,
    Layout,
    SelectItem,
    Icon,
} from "@ui-kitten/components";
import { useModel } from "flooks";
import { Dimensions } from "react-native";
import { Actionsheet } from "beeshell";

const selects = (list, selectAction) => {
    return list.map((item) => {
        return <MenuItem title={item} key={item} />;
    });
};
const ForwardIcon = (props) => <Icon {...props} name='arrow-ios-forward' />;
export default function myActionsheet({ list, onChange, value }) {
    const { cancel } = useModel("wordsModel");

    const datas = React.useMemo(() => {
        if (list && list.length > 0) {
            return list.map((item) => {
                return { label: item, value: item };
            });
        } else {
            return [];
        }
    }, [list]);

    const [bottomModalX, changeBottomModalx] = React.useState("");
    return (
        <>
            <SelectItem
                appearance='form'
                style={{ flex: 1 }}
                accessoryRight={ForwardIcon}
                title={value || " "}
                onPress={() => {
                    bottomModalX.open();
                }}
            />
            <Actionsheet
                ref={(c) => {
                    changeBottomModalx(c);
                }}
                header={<View />}
                data={list}
                cancelable={true}
                maxShowNum={4}
                useSafeAreaView={true}
                onPressConfirm={(item) => {
                    onChange(item);
                }}
                onPressCancel={() => {
                    console.log("cancel");
                }}
                renderItem={(item, index) => {
                    return (
                        <View style={styles.item}>
                            <Text style={styles.text}>{item}</Text>
                        </View>
                    );
                }}
            ></Actionsheet>
        </>
    );
}

const styles = StyleSheet.create({
    backdrop: {
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    menu: {
        bottom: 0,
    },
    modal: {},
    layout: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    text: {
        fontSize: 12,
    },
    item: {
        flexDirection: "row",
        paddingVertical: 10,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#fff",
        borderBottomWidth: 1,
        borderColor: "rgb(228, 233, 242)",
    },
});