import { Portal } from '@gorhom/portal'
import { BlurView } from 'expo-blur'
import React, { useEffect, useMemo } from 'react'
import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'

import { Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import QrCode from '../QrCode'

const ShareQrModal = ({ visible, onClose, url, title = 'Partage Musicland avec tes amis' }) => {
  const shareUrl = useMemo(() => url, [url])

  useEffect(() => {
    console.log('share.qr.modal.state', {
      visible,
      url: shareUrl,
    })
  }, [shareUrl, visible])

  if (!visible) {
    return null
  }

  const blurIntensity = Platform.select({ ios: 40, android: 40, default: 20 })

  return (
    <Portal>
      <View style={styles.overlay}>
        <Pressable onPress={onClose} accessibilityRole="button" style={styles.backdrop} />

        <View style={styles.centerWrapper} pointerEvents="box-none">
          <BlurView
            intensity={blurIntensity}
            tint="dark"
            style={styles.modalCard}
            experimentalBlurMethod="dimezisBlurView"
          >
            {/* <Pressable
              onPress={onClose}
              style={styles.closeButton}
              hitSlop={10}
            >
              <Feather name="x" size={20} color={Palette.white} />
            </Pressable> */}

            <View style={styles.content}>
              <Text style={styles.title}>{title}</Text>
              <Text style={styles.subtitle}>Partage Musicland à tes amis.</Text>

              <View style={styles.qrWrapper}>
                <QrCode value={shareUrl} size={220} backgroundColor="transparent" />
              </View>

              <Text numberOfLines={1} ellipsizeMode="middle" style={styles.linkText}>
                {shareUrl}
              </Text>
            </View>
          </BlurView>
        </View>
      </View>
    </Portal>
  )
}

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 200,
    ...Platform.select({
      web: {
        position: 'fixed',
      },
    }),
  },
  backdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.65)',
    ...Platform.select({
      web: {
        position: 'fixed',
      },
    }),
  },
  centerWrapper: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  modalCard: {
    width: 360,
    maxWidth: '90%',
    borderRadius: 28,
    overflow: 'hidden',
    paddingHorizontal: 24,
    paddingVertical: 32,
    backgroundColor: Palette.glass,
  },
  closeButton: {
    position: 'absolute',
    top: 18,
    right: 18,
    width: 36,
    height: 36,
    borderRadius: 18,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.12)',
  },
  content: {
    alignItems: 'center',
    gap: 18,
  },
  title: {
    fontSize: 20,
    color: Palette.white,
    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
  },
  subtitle: {
    fontSize: 14,
    color: Palette.white,
    opacity: 0.8,
    textAlign: 'center',
    fontFamily: FONT_FAMILY.InterRegular,
    paddingHorizontal: 8,
  },
  qrWrapper: {
    padding: 16,
    borderRadius: 24,
    backgroundColor: 'rgba(255, 255, 255, 0.08)',
  },
  linkText: {
    fontSize: 13,
    color: Palette.white,
    opacity: 0.9,
    textAlign: 'center',
    fontFamily: FONT_FAMILY.InterMedium,
  },
})

export default ShareQrModal