import React, {useCallback, useEffect, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  Avatar,
  Dialog,
  Title,
  type InputSelectOption,
  Pressable,
} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export interface SelectLocationDialogProps {
  isVisible: boolean;
  onClose: () => void;
  onConfirm: (id: number) => void;
  options: InputSelectOption<number>[];
  selectedId: Nullable<number>;
}

export function SelectLocationDialog({
  isVisible,
  onClose,
  onConfirm,
  options,
  selectedId,
}: SelectLocationDialogProps) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const [pendingId, setPendingId] = useState<Nullable<number>>(selectedId);

  useEffect(() => {
    if (!isVisible) {
      return;
    }
    setPendingId(
      selectedId ?? options.find(option => !option.disabled)?.id ?? null,
    );
  }, [isVisible, selectedId, options]);

  const handleConfirm = useCallback(() => {
    if (pendingId !== null) {
      onConfirm(pendingId);
    }
    onClose();
  }, [onClose, onConfirm, pendingId]);

  const footer = {
    primaryButton: {
      disabled: pendingId === null,
      onPress: handleConfirm,
      text: t('general.select'),
    },
    secondaryButton: {
      onPress: onClose,
      text: t('general.exit'),
    },
  };

  const renderLocation = (option: InputSelectOption<number>) => {
    const isSelected = pendingId === option.id;
    const selectedStyle = isSelected
      ? {
          backgroundColor: theme.background.layout.brand,
          borderColor: theme.brand[500],
        }
      : {
          backgroundColor: theme.background.elements.default,
          borderColor: theme.border.neutral.default,
        };

    return (
      <Pressable
        accessibilityRole="button"
        accessibilityState={{
          disabled: !!option.disabled,
          selected: isSelected,
        }}
        disabled={option.disabled}
        key={`${option.id}`}
        onPress={() => setPendingId(option.id)}
        style={[styles.optionCard, selectedStyle]}>
        <View style={styles.optionPressable}>
          {option.AvatarProps ? (
            <Avatar {...option.AvatarProps} size="md" />
          ) : null}
          <View style={styles.optionTextWrap}>
            <Title
              description={option.description}
              descriptionNumberOfLines={2}
              size="s"
              title={option.label}
              titleNumberOfLines={2}
            />
          </View>
        </View>
      </Pressable>
    );
  };

  return (
    <Dialog
      fullScreen
      enableContentPanningGesture={false}
      footer={footer}
      contentStyle={styles.optionsContainer}
      isVisible={isVisible}
      onClose={onClose}
      wrapperType="scrollable"
      title={t('time_tracking_common.select_location')}>
      <View style={styles.options}>{options.map(renderLocation)}</View>
    </Dialog>
  );
}