import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Icon } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { Picker } from '@ant-design/react-native';

import useModel from 'flooks';
import Order from './model'; // detail模块通用方法

const list = [
  {
    label: '(推荐一起环保)无需餐具 ',
    value: 0,
  },
  {
    label: '1份 ',
    value: 1,
  },
  {
    label: '2份 ',
    value: 2,
  },
  {
    label: '3份 ',
    value: 3,
  },
  {
    label: '4份 ',
    value: 4,
  },
  {
    label: '5份 ',
    value: 5,
  },
  {
    label: '6份 ',
    value: 6,
  },
  {
    label: '7份 ',
    value: 7,
  },
  {
    label: '8份 ',
    value: 8,
  },
  {
    label: '9份 ',
    value: 9,
  },
  {
    label: '10份 ',
    value: 10,
  },
];

export default function TablewareCom() {
  const { tablewareNum, changetablewareNum } = useModel(Order, [
    'tablewareNum',
  ]);
  const pickerRef = React.createRef();

  return (
    <>
      <Picker
        ref={pickerRef}
        data={list}
        cols={1}
        value={tablewareNum}
        onChange={changetablewareNum}
        itemStyle={{ paddingVertical: 10 }}
      >
        <Button bg="hide" block p="none">
          <Div row flex={1} py={10} alignItems="center">
            <Text fontSize="xl">餐具份数</Text>
            <Text fontSize="sm" textAlign="right" flex={1}>
              {tablewareNum || '加入环保'}
            </Text>
            <Icon name="right" />
          </Div>
        </Button>
      </Picker>
    </>
  );
}