import React from 'react';
import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

import SheetModal from '@/components/ui/SheetModal';

export type ThemeMode = 'scenery' | 'color';

type Props = {
  visible: boolean;
  mode: ThemeMode;
  onSelect: (mode: ThemeMode) => void;
  onClose: () => void;
};

export default function ThemeModal({ visible, mode, onSelect, onClose }: Props) {
  const { t } = useTranslation();
  return (
    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose}>
      <View style={styles.row}>
        <ThemeCard
          title={t('theme.scenery')}
          selected={mode === 'scenery'}
          onPress={() => onSelect('scenery')}
        >
          <Image
            source={require('../../assets/images/index/index_flowers.png')}
            resizeMode="cover"
            style={styles.previewImage}
          />
        </ThemeCard>

        <ThemeCard
          title={t('theme.color')}
          selected={mode === 'color'}
          onPress={() => onSelect('color')}
        >
          <View style={styles.colorPreview} />
        </ThemeCard>
      </View>
    </SheetModal>
  );
}

function ThemeCard({
  title,
  selected,
  onPress,
  children,
}: {
  title: string;
  selected: boolean;
  onPress: () => void;
  children: React.ReactNode;
}) {
  return (
    <Pressable
      onPress={onPress}
      style={[styles.card, selected ? styles.cardSelected : styles.cardUnselected]}
      hitSlop={6}
    >
      <View style={styles.preview}>{children}</View>
      <Text style={styles.cardTitle}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    gap: 14,
    paddingBottom: 18,
  },
  card: {
    flex: 1,
    borderRadius: 18,
    padding: 10,
    backgroundColor: 'rgba(255,255,255,0.55)',
  },
  cardSelected: {
    borderWidth: 2,
    borderColor: '#F99CC0',
  },
  cardUnselected: {
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(94,42,40,0.18)',
  },
  preview: {
    height: 96,
    borderRadius: 14,
    overflow: 'hidden',
    backgroundColor: '#fff',
    marginBottom: 10,
  },
  previewImage: {
    width: '100%',
    height: '100%',
  },
  colorPreview: {
    flex: 1,
    backgroundColor: '#F3D0E1',
  },
  cardTitle: {
    color: '#5E2A28',
    fontSize: 14,
    fontWeight: '700',
    textAlign: 'center',
  },
});