import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { find} from './utils/array.utils';
import { INumberPleaseProps, IValue } from './NumberPlease.interface';
import range from './utils/range';
import { Picker } from '@react-native-picker/picker';

const PickerFactory: React.FC<any> = React.forwardRef(({
  pickerProps,
  selectedValue,
  onChange,
  style,
  itemStyle,
  disabled,
}: any, ref:any) => {
  const { id, label = '', min, max } = pickerProps;
  const numbers = range(min, max);

  return (
    <Picker
    ref={ref}
    style={{ ...styles.picker, ...style }}
    selectedValue={selectedValue}
    onValueChange={(value: any) => onChange({ [id]: value })}
    itemStyle={itemStyle}
    enabled={!disabled}
    >
      {numbers.map((number, index) => (
        <Picker.Item
        key={`${id}-${number}-${index}`}
        value={number}
        label={`${number} ${label}`}
        enabled={!disabled}

        />
        ))}
    </Picker>
  );
});

const NumberPlease: React.FC<INumberPleaseProps> = ({
  pickers,
  values,
  onChange,
  itemStyle,
  style,
  ...rest
}: any) => {

  console.log(pickers);


  React.useEffect(() => {
    Object.keys(values).some((key) => {
      if (!find(pickers, (picker) => picker.id === key)) {
        throw new Error(`Picker with id '${key}' not found. Double check your initialValues.`,);
      }
    });
  }, [values, pickers]);

  const onChangeHandle = (value: IValue) => {
    onChange({
      ...values,
      ...value,
    });
  };


  const findPickerValue = (picker:any) => {
    return values[picker.id];
  };

  return (
    <View style={styles.container}>
      {pickers.map((picker: any, index: any) => {
        const {id, ref, disabled = false } = picker;
        const pickerValue = findPickerValue(picker);
        return (
          <PickerFactory
            ref={ref}
            key={`${id}-picker-${index}`}
            pickerProps={picker}
            selectedValue={pickerValue}
            onChange={onChangeHandle}
            disabled={disabled}
            itemStyle={itemStyle}
            style={style}
            {...rest}
          />
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  picker: {
    height: '100%',
    flex: 1,
  },
});

export default NumberPlease;