import React from "react";
import { StyleSheet, View, Text } from "react-native";
import { SelectItem, Icon } from "@ui-kitten/components";
import { Actionsheet } from "beeshell";

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)",
  },
});

const ForwardIcon = props => <Icon {...props} name="arrow-ios-forward" />;
export default function myActionsheet({ list, onChange, value }) {
  const bottomRef = React.useRef();
  return (
    <>
      <SelectItem
        appearance="form"
        style={{ flex: 1 }}
        accessoryRight={ForwardIcon}
        title={value || " "}
        onPress={() => {
          bottomRef.current.open();
        }}
      />
      <Actionsheet
        ref={bottomRef}
        header={<View />}
        data={list}
        cancelable
        maxShowNum={4}
        useSafeAreaView
        onPressConfirm={item => {
          onChange(item);
        }}
        onPressCancel={() => {}}
        renderItem={item => {
          return (
            <View style={styles.item}>
              <Text style={styles.text}>{item}</Text>
            </View>
          );
        }}
      />
    </>
  );
}