import React, {useCallback} from 'react';
import {View, ViewStyle, StyleProp, Pressable} from 'react-native';
import {IconStar, IconStarFilled} from '@tabler/icons-react-native';
import {ICON_SIZES, useTheme} from '@shared/theme';

import {CardContainer} from '../CardContainer';
import {
  InputHelper,
  useInputController,
  UseInputControllerProps,
} from '../Inputs';
import {styles} from './styles';

interface Props {
  disabled?: boolean;
  limit?: number;
  onChangeRate?: (value: number) => void;
  rate: number;
  style?: StyleProp<ViewStyle>;
  layout?: 'card' | 'default';
  showErrorHelper?: boolean;
}

export function Rating({
  disabled = false,
  limit = 5,
  onChangeRate,
  rate,
  style,
  layout = 'default',
}: Props) {
  const {theme} = useTheme();

  const onPressStar = useCallback(
    (value: number) => {
      const newValue = rate === value ? 0 : value;
      onChangeRate?.(newValue);
    },
    [onChangeRate, rate],
  );

  const ComponentLayout = layout === 'card' ? CardContainer : View;

  return (
    <ComponentLayout
      style={[
        styles.container,
        layout === 'default' && styles.defaultPadding,
        style,
        disabled &&
          layout === 'card' && {
            backgroundColor: theme.action.background.brand.disabled,
          },
      ]}>
      {Array.from(Array(limit).keys()).map(key => {
        const starNumber = key + 1;
        const isSelected = key < rate;
        const onPress = () => onPressStar(starNumber);
        const selectedColor = disabled
          ? theme.button.background.primary.hover
          : theme.button.background.primary.default;

        return (
          <Pressable
            key={key}
            onPress={onPress}
            disabled={disabled}
            style={styles.iconContainer}
            accessible
            accessibilityRole="button"
            accessibilityLabel={`${starNumber}/${limit}`}
            accessibilityState={{selected: isSelected, disabled}}>
            {isSelected ? (
              <IconStarFilled
                size={ICON_SIZES.x8}
                color={selectedColor}
                fill={selectedColor}
              />
            ) : (
              <IconStar
                size={ICON_SIZES.x8}
                color={
                  disabled
                    ? theme.button.background.disabled.darker
                    : theme.button.background.primary.disabled
                }
              />
            )}
          </Pressable>
        );
      })}
    </ComponentLayout>
  );
}

type RatingControllerProps = Omit<Props, 'rate'> & UseInputControllerProps;

export const RatingController = ({
  name,
  showErrorHelper = false,
  ...props
}: RatingControllerProps) => {
  const {onChange, value, isError, isSuccess, helper} = useInputController({
    name,
  });

  return (
    <>
      <Rating {...props} rate={value} onChangeRate={onChange} />
      {showErrorHelper && (
        <InputHelper isError={isError} isSuccess={isSuccess} helper={helper} />
      )}
    </>
  );
};