import React from 'react';
import {
  View,
  TouchableOpacity,
  Dimensions,
  Modal,
  Platform,
  Image,
} from 'react-native';

import Button, { ButtonVariant } from './button';
import { BlurView as RNBlurView } from '@react-native-community/blur';
import BlurView from './BlurView';
import Text from './text';

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

interface CommonModalProps {
  isVisible: boolean;
  mainTitle: string;
  subTitle?: string;
  onClose: () => void;
  onConfirm?: () => void;
  cancelButton?: {
    text?: string;
    variant?: ButtonVariant;
    shape?: 'pill' | 'round';
    className?: string;
  };
  confirmButton?: {
    text?: string;
    variant?: ButtonVariant;
    shape?: 'pill' | 'round';
    className?: string;
  };
}

const CommonModal = ({
  isVisible,
  mainTitle,
  subTitle,
  onClose,
  onConfirm,
  cancelButton = { text: '취소', variant: 'primaryLow' },
  confirmButton = { text: '확인', variant: 'primary' },
}: CommonModalProps) => {
  return (
    <View>
      <Modal visible={isVisible} transparent animationType="fade">
        <TouchableOpacity
          activeOpacity={1}
          onPress={onClose}
          style={{
            width: SCREEN_WIDTH,
            height: SCREEN_HEIGHT,
          }}
        >
          {Platform.OS === 'android' ? (
            <RNBlurView
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                bottom: 0,
                right: 0,
                backgroundColor: 'rgba(3, 24, 50, 0.46)',
              }}
              blurType="dark"
              blurAmount={10}
              overlayColor="rgba(3, 24, 50, 0.46)"
            />
          ) : (
            <BlurView
              backgroundColor={'rgba(3, 24, 50, 0.46)'}
              blurRadius={10}
              zIndex={1}
              blur={true}
            />
          )}

          <View
            className="w-full h-full justify-center items-center"
            style={{ zIndex: 2 }}
          >
            <View className="w-[80%] rounded-2xl p-[20px] bg-white">
              <View className="items-start gap-[4px] pt-4 pb-[12px]">
                <Text
                  face={'title'}
                  weight={'bold'}
                  size={'small'}
                  textColor={'gray-900'}
                >
                  {mainTitle}
                </Text>
                {subTitle && (
                  <Text
                    face={'body'}
                    weight={'regular'}
                    size={'medium'}
                    textColor={'gray-700'}
                    className={'w-[78%]'}
                  >
                    {subTitle}
                  </Text>
                )}
              </View>

              <View
                className={`flex-row gap-2 ${!onConfirm ? 'justify-center' : ''}`}
              >
                {onConfirm ? (
                  <>
                    <Button
                      text={cancelButton.text}
                      variant={cancelButton.variant}
                      shape={cancelButton.shape}
                      className={`flex-1 ${cancelButton.className || ''}`}
                      onPress={onClose}
                    />
                    <Button
                      text={confirmButton.text}
                      variant={confirmButton.variant}
                      shape={confirmButton.shape}
                      className={`flex-1 ${confirmButton.className || ''}`}
                      onPress={onConfirm}
                    />
                  </>
                ) : (
                  <Button
                    text={confirmButton.text}
                    variant={confirmButton.variant || 'danger'}
                    shape={confirmButton.shape || 'round'}
                    className={`flex-1 ${confirmButton.className || ''}`}
                    onPress={onClose}
                  />
                )}
              </View>
            </View>
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
};

export default CommonModal;