// Selector component
// props:
//   - options: array of objects with the following properties:
//     - label: string
//     - value: string
//   - selected: string
//   - onSelect: function
//   - style: object
//   - labelStyle: object
//   - selectedLabelStyle: object
//   - selectedStyle: object
//   - disabled: boolean
//   - disabledStyle: object
//   - disabledLabelStyle: object

import React from 'react'
import { View, StyleSheet, TouchableOpacity } from 'react-native'
import { colors, spacing } from '../theme'
import Icon from './Icon'
import Modal from './Modal'
import Text from './Text'

const Selector = ({
  options,
  selected,
  defaultOption,
  style,
  labelStyle,
  selectedLabelStyle,
  selectedStyle,
  disabled,
  disabledStyle,
  disabledLabelStyle,
  onSelect,
  showSelector,
  label,
}) => {
  const [open, setOpen] = React.useState(showSelector)
  const openSelector = () => {
    setOpen(!open)
  }
  return (
    <View style={[styles.container, style]}>
      {open && (
        <Modal visible={open} onClose={openSelector}>
          {options.map((option) => {
            const isSelected = selected === option.value

            return (
              <TouchableOpacity
                key={option.value}
                style={[
                  styles.option,
                  isSelected && styles.selected,
                  isSelected && selectedStyle,
                  disabled && styles.disabled,
                  disabled && disabledStyle,
                ]}
                onPress={() => {
                  onSelect(option)
                  openSelector()
                }}
                disabled={disabled}
              >
                <Text
                  style={[
                    styles.label,
                    isSelected && styles.selectedLabel,
                    isSelected && selectedLabelStyle,
                    disabled && styles.disabledLabel,
                    disabled && disabledLabelStyle,
                  ]}
                >
                  {option.label}
                </Text>
              </TouchableOpacity>
            )
          })}
        </Modal>
      )}
      <>
        <Text mb={8} style={[labelStyle]}>
          {label}
        </Text>
        <TouchableOpacity
          style={[styles.defaultSelector]}
          onPress={openSelector}
          disabled={disabled}
        >
          <Text style={[styles.defaultSelectorText]}>
            {defaultOption.label}
          </Text>
          <Icon name='keyboard-arrow-down' size={24} />
        </TouchableOpacity>
      </>
    </View>
  )
}

const styles = StyleSheet.create({
  defaultSelector: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: colors.n_100,
    borderRadius: 8,
    padding: spacing.s_3,
    width: '100%',
    marginBottom: spacing.s_1,
  },
  defaultSelectorText: {
    color: colors.n_900,
    textAlign: 'center',
    fontWeight: '500',
  },

  option: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: spacing.s_2,
    width: '100%',
    marginBottom: spacing.s_1,
  },
  selected: {
    backgroundColor: colors.p_100,
  },

  disabled: {
    backgroundColor: colors.n_200,
  },
  disabledLabel: {
    color: colors.n_400,
  },
  label: {
    color: colors.n_900,
    textAlign: 'center',
    fontWeight: '500',
  },
  selectedLabel: {
    color: colors.n_100,
  },
})

export default Selector