import { useState } from 'react';
import { View, Text, Pressable, Image, TextInput, StyleSheet } from 'react-native';
import {
  Select,
  SelectTrigger,
  SelectInput,
  SelectIcon,
  SelectPortal,
  SelectBackdrop,
  SelectContent,
  SelectDragIndicator,
  SelectDragIndicatorWrapper,
  SelectItem,
} from '@/components/ui/select';
import { ChevronRightIcon } from '@/components/ui/icon';
import { Button, ButtonText } from '@/components/ui/button';

export default function Save() {
  const [selectedLanguage, setSelectedLanguage] = useState();
  return (
    <View className="bg-[#f6f7fb]">
      <View className="px-5 mt-2 bg-white">
        <View style={styles.itemBox}>
          <Text>测量名称</Text>
          <TextInput style={styles.itemInput} placeholder="请填写"></TextInput>
        </View>
        <View style={styles.itemBox}>
          <Select className="h-full">
            <SelectTrigger className='h-full border-b-0' variant="underlined" size="md">
              <View className="flex-row items-center w-full">
                <Text>轨型</Text>
                <Text className="ml-auto">60轨</Text>
                <SelectIcon className="ml-2" as={ChevronRightIcon} />
              </View>
            </SelectTrigger>
            <SelectPortal>
              <SelectBackdrop />
              <SelectContent>
                <SelectDragIndicatorWrapper>
                  <SelectDragIndicator />
                </SelectDragIndicatorWrapper>
                <SelectItem label="UX Research" value="ux" />
                <SelectItem label="Web Development" value="web" />
                <SelectItem label="Cross Platform" value="Development Process" />
                <SelectItem label="UI Designing" value="ui" isDisabled={true} />
                <SelectItem label="Backend Development" value="backend" />
              </SelectContent>
            </SelectPortal>
          </Select>
        </View>
        <View style={styles.itemBox}>
          <Select className="h-full">
            <SelectTrigger className='h-full border-b-0' variant="underlined" size="md">
              <View className="flex-row items-center w-full">
                <Text>核校方式</Text>
                <Text className="ml-auto">按磨耗校核钢轨-右基准</Text>
                <SelectIcon className="ml-2" as={ChevronRightIcon} />
              </View>
            </SelectTrigger>
            <SelectPortal>
              <SelectBackdrop />
              <SelectContent>
                <SelectDragIndicatorWrapper>
                  <SelectDragIndicator />
                </SelectDragIndicatorWrapper>
                <SelectItem label="UX Research" value="ux" />
                <SelectItem label="Web Development" value="web" />
                <SelectItem label="Cross Platform" value="Development Process" />
                <SelectItem label="UI Designing" value="ui" isDisabled={true} />
                <SelectItem label="Backend Development" value="backend" />
              </SelectContent>
            </SelectPortal>
          </Select>
        </View>
      </View>
      <Button className="h-12 mt-10 mx-9 bg-[#3165D2]">
        <ButtonText>确定</ButtonText>
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  form: {
    position: 'relative',
    paddingHorizontal: 16,
  },
  itemBox: {
    height: 50,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 8,
    fontSize: 14,
    borderBottomWidth: 1,
    borderBottomColor: '#eeeeee'
  },
  itemInput: {
    flex: 1,
    height: '100%',
    textAlign: 'right',
  },
});