import React from 'react'
import { Pressable, View, ViewStyle } from 'react-native'

import { colors } from '../../Colors'
import { Checkbox } from '../Checkbox'

export const SelectableListItem: React.FC<{
  selected?: boolean
  disabled?: boolean
  onChange: (selected: boolean) => void
  style?: ViewStyle
}> = ({ selected, disabled, onChange, children, style }) => {
  const handleCheckedChange = () => {
    const nextSelected = !selected
    onChange(nextSelected)
  }

  return (
    <Pressable
      onPress={handleCheckedChange}
      disabled={disabled}
      style={({ pressed }) => [
        {
          backgroundColor: pressed
            ? colors.metals.metal1
            : colors.metals.metal2,
        },
        style,
      ]}
    >
      <View style={{ flexDirection: 'row' }}>
        <View
          style={{
            justifyContent: 'center',
            paddingLeft: 12,
          }}
        >
          <Checkbox
            onPress={handleCheckedChange}
            checked={selected}
            muted={disabled}
          />
        </View>
        <View style={{ flex: 1 }}>{children}</View>
      </View>
    </Pressable>
  )
}