1import Checkbox from 'expo-checkbox';
2import React, { useCallback } from 'react';
3import { View, Text, StyleSheet } from 'react-native';
4
5import EnumButton from './EnumButton';
6import Platforms from './Platforms';
7import {
8  ArgumentName,
9  EnumParameter,
10  NumberParameter,
11  OnArgumentChangeCallback,
12  Platform,
13  PrimitiveArgument,
14  PrimitiveParameter,
15  StringParameter,
16} from './index.types';
17import { isCurrentPlatformSupported } from './utils';
18
19type Props = {
20  name: ArgumentName;
21  platforms?: Platform[];
22  type: PrimitiveParameter['type'];
23  values?: (StringParameter | NumberParameter | EnumParameter)['values'];
24  value: PrimitiveArgument;
25  onChange: OnArgumentChangeCallback;
26};
27
28export default function ConfiguratorChoice({
29  name,
30  value,
31  onChange,
32  type,
33  values = [],
34  platforms = [],
35}: Props) {
36  const isPlatformSupported = isCurrentPlatformSupported(platforms);
37  const disabled = !isPlatformSupported;
38  const onChangeCallback = useCallback(
39    (newValue: PrimitiveArgument) => onChange(name, newValue),
40    [name, onChange]
41  );
42
43  return (
44    <View style={styles.container}>
45      <Platforms platforms={platforms} />
46      <Text style={[styles.label, disabled && styles.labelDisabled]}>
47        {Array.isArray(name) ? name.join('.') : name}
48      </Text>
49      {type === 'boolean' ? (
50        <Checkbox
51          disabled={disabled}
52          style={styles.checkbox}
53          onValueChange={onChangeCallback}
54          value={value as boolean}
55        />
56      ) : (
57        <EnumButton
58          disabled={disabled}
59          value={value as Exclude<PrimitiveArgument, boolean>}
60          onChange={onChangeCallback}
61          values={values}
62        />
63      )}
64    </View>
65  );
66}
67
68const styles = StyleSheet.create({
69  container: {
70    paddingVertical: 2,
71    flexDirection: 'row',
72    alignItems: 'center',
73    flexWrap: 'wrap',
74    position: 'relative',
75  },
76  label: {
77    fontSize: 12,
78  },
79  labelDisabled: {
80    textDecorationLine: 'line-through',
81  },
82  checkbox: {
83    marginLeft: 5,
84  },
85});
86