import * as React from 'react';
import { Dimensions, Platform, ScrollView, View } from 'react-native';

import { Alert, AlertAnchor } from '../Alert';
import type { AlertMethods } from '../Alert/types';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/nativewindui/Avatar';
import { Button } from '@/components/nativewindui/Button';
import { Text } from '@/components/nativewindui/Text';
import { cn } from '@/lib/cn';

const MATERIAL_WIDTH = Dimensions.get('window').width - 80;

export default function AlertScreen() {
  const alertRef = React.useRef<AlertMethods>(null);
  const alertAnchorRef = React.useRef<AlertMethods>(null);

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      showAlert();
    }, 350);

    return () => {
      clearTimeout(timeout);
    };
  }, []);

  function showAlert() {
    alertRef.current?.show();
  }

  function showConfirmActionAlert() {
    alertAnchorRef.current?.prompt({
      title: 'Password Confirmation',
      message: 'Please enter your password to confirm deleting this contact.',
      materialWidth: MATERIAL_WIDTH,
      prompt: {
        type: 'secure-text',
        keyboardType: 'default',
      },
      buttons: [
        {
          text: 'Cancel',
          style: 'cancel',
        },
        {
          text: 'Confirm',
          style: 'destructive',
        },
      ],
    });
  }

  return (
    <>
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="pt-8">
        <Avatar alt="Zach Nugent Avatar" className="mx-auto mb-8 h-24 w-24">
          <AvatarImage />
          <AvatarFallback>
            <Text
              className={cn(
                'pt-1 font-medium text-white',
                Platform.OS === 'android' && 'dark:text-background'
              )}
              variant="largeTitle">
              ZN
            </Text>
          </AvatarFallback>
        </Avatar>

        <Section>
          <Row>
            <Text>Zach</Text>
          </Row>
          <Separator />
          <Row>
            <Text>Nugent</Text>
          </Row>
          <Separator />
          <Row>
            <Text>NativewindUI</Text>
          </Row>
        </Section>
        <Section>
          <Alert
            ref={alertRef}
            title="Delete contact?"
            message="This action cannot be undone."
            materialWidth={MATERIAL_WIDTH}
            buttons={[
              {
                text: 'Cancel',
                style: 'cancel',
              },
              {
                text: 'Delete',
                style: 'destructive',
                onPress: showConfirmActionAlert,
              },
            ]}>
            <Button variant="plain" size="none" className="justify-start">
              <Row>
                <Text className="text-destructive">Delete Contact</Text>
              </Row>
            </Button>
          </Alert>
        </Section>
      </ScrollView>
      <AlertAnchor ref={alertAnchorRef} />
    </>
  );
}

function Section({ children }: { children: React.ReactNode }) {
  return (
    <View
      className={cn(
        'bg-muted/15 border-muted/30 bg-card/70 dark:border-border/80 mb-8 border-b border-t',
        Platform.OS === 'ios' && 'dark:bg-muted/50 dark:border-muted/30'
      )}>
      {children}
    </View>
  );
}

function Row({ children }: { children: React.ReactNode }) {
  return <View className="px-4 py-2.5">{children}</View>;
}

function Separator() {
  return (
    <View
      className={cn(
        'bg-muted/30 dark:bg-border/80 h-px flex-1',
        Platform.OS === 'ios' && 'bg-muted/30 dark:bg-muted/50 ml-4'
      )}
    />
  );
}