import { TouchableOpacity, Text, View, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import { ButtonProps, ListItemProps } from './types'
import { renderIcon } from './listItem'

const getIcon = (
  type: string,
  icon: string | undefined,
  inactiveToggle: string | undefined,
  activeToggle: string | undefined,
  toggleCondition: boolean | undefined
): string | undefined => {
  if (type === 'icon') {
    return icon
  }

  return toggleCondition ? activeToggle : inactiveToggle
}

const getIconColor = (
  type: string,
  color: string,
  inactiveToggleColor: string,
  activeToggleColor: string,
  toggleCondition: boolean | undefined
): string => {
  if (type === 'icon') {
    return color
  }

  return toggleCondition ? activeToggleColor : inactiveToggleColor
}

export const getIconButton = (props: ButtonProps): JSX.Element | null => {
  const {
    type,
    icon,
    inactiveIcon,
    activeIcon,
    color,
    inactiveColor,
    activeColor,
    label,
    propValue,
    state,
    setState,
    iconButtonAction,
    textStyles,
  } = props

  const rendered = getIcon(type, icon, inactiveIcon, activeIcon, state)
  const renderedColor = getIconColor(
    type,
    color,
    inactiveColor,
    activeColor,
    state
  )

  const leftButton1Action = () =>
    iconButtonAction(type, !state, setState, propValue)

  if (!rendered) return null

  return (
    <TouchableOpacity style={styles.button} onPress={leftButton1Action}>
      {renderIcon(rendered, 24, renderedColor)}
      {label && (
        <Text numberOfLines={1} style={[styles.textStyle, textStyles]}>
          {label}
        </Text>
      )}
    </TouchableOpacity>
  )
}

export const BottomButtons = (
  props: ListItemProps & {
    iconButtonAction: (
      type: 'icon' | 'toggle',
      state: boolean,
      setState: (state: boolean) => void,
      propValue: 'leftIcon1' | 'leftIcon2' | 'rightIcon'
    ) => void
    bottomButtonAction: () => void
  }
): JSX.Element => {
  const { buttons, iconButtonAction, bottomButtonAction, background } = props
  const { padding } = background
  const {
    leftIcon1Type,
    leftIcon1Input,
    leftIcon1,
    leftIcon1Color,
    leftIcon1ActiveIcon,
    leftIcon1ActiveColor,
    leftIcon1InactiveIcon,
    leftIcon1InactiveColor,
    leftIcon1Label,
    enableLeftIcon2,
    leftIcon2Type,
    leftIcon2Input,
    leftIcon2ActiveIcon,
    leftIcon2ActiveColor,
    leftIcon2InactiveIcon,
    leftIcon2Color,
    leftIcon2InactiveColor,
    leftIcon2,
    leftIcon2Label,
    enableRightIcon,
    rightIconType,
    rightIconInput,
    rightIconActiveIcon,
    rightIconActiveColor,
    rightIconInactiveIcon,
    rightIconColor,
    rightIconInactiveColor,
    rightIcon,
    enableBottomButton,
    bottomButtonColor,
    bottomButtonText,
    styles: buttonStyles,
  } = buttons

  const {
    leftIcon1Label: leftIcon1TextStyles,
    leftIcon2Label: leftIcon2TextStyles,
    bottomButtonText: bottomButtonTextStyles,
  } = buttonStyles

  const [leftIcon1State, setLeftIcon1State] = useState(leftIcon1Input)
  const [leftIcon2State, setLeftIcon2State] = useState(leftIcon2Input)
  const [rightIconState, setRightIconState] = useState(rightIconInput)

  const buttonContainerStyles = {
    paddingHorizontal: 4 + padding,
    marginTop: 9 + padding,
  }

  return (
    <View>
      <View style={[styles.buttonsContainer, buttonContainerStyles]}>
        <View style={{ flexDirection: 'row' }}>
          {getIconButton({
            type: leftIcon1Type,
            icon: leftIcon1,
            inactiveIcon: leftIcon1InactiveIcon,
            activeIcon: leftIcon1ActiveIcon,
            color: leftIcon1Color,
            inactiveColor: leftIcon1InactiveColor,
            activeColor: leftIcon1ActiveColor,
            label: leftIcon1Label,
            propValue: 'leftIcon1',
            state: leftIcon1State,
            setState: setLeftIcon1State,
            iconButtonAction,
            textStyles: leftIcon1TextStyles,
          })}
          {enableLeftIcon2 &&
            getIconButton({
              type: leftIcon2Type,
              icon: leftIcon2,
              inactiveIcon: leftIcon2InactiveIcon,
              activeIcon: leftIcon2ActiveIcon,
              color: leftIcon2Color,
              inactiveColor: leftIcon2InactiveColor,
              activeColor: leftIcon2ActiveColor,
              label: leftIcon2Label,
              propValue: 'leftIcon2',
              state: leftIcon2State,
              setState: setLeftIcon2State,
              iconButtonAction,
              textStyles: leftIcon2TextStyles,
            })}
        </View>
        {enableRightIcon &&
          getIconButton({
            type: rightIconType,
            icon: rightIcon,
            inactiveIcon: rightIconInactiveIcon,
            activeIcon: rightIconActiveIcon,
            color: rightIconColor,
            inactiveColor: rightIconInactiveColor,
            activeColor: rightIconActiveColor,
            propValue: 'rightIcon',
            state: rightIconState,
            setState: setRightIconState,
            iconButtonAction,
          })}
      </View>
      {enableBottomButton && (
        <TouchableOpacity
          style={[styles.bottomButton, { backgroundColor: bottomButtonColor }]}
          onPress={bottomButtonAction}
        >
          <Text numberOfLines={1} style={bottomButtonTextStyles}>
            {bottomButtonText}
          </Text>
        </TouchableOpacity>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  buttonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 10,
    justifyContent: 'flex-start',
  },
  textStyle: {
    marginLeft: 5,
  },
  bottomButton: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
    height: 35,
    borderRadius: 18,
    marginTop: 10,
    width: '60%',
    alignSelf: 'center',
  },
})