import React from 'react';
import { Screen, View, Button, Text } from '@idealyst/components';
import { useUnistyles } from 'react-native-unistyles';

export const ButtonExamples = () => {
  const handlePress = (buttonType: string) => {
    console.log(`Button pressed: ${buttonType}`);
  };

  const { theme } = useUnistyles()

  return (
    <Screen background="primary">
      <View gap="xl">
      <Text typography="h4" align="center">
        Button Examples
      </Text>
      
      {/* Button Variants */}
      <View gap="md">
        <Text typography="subtitle1">Variants</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button 
            type="contained" 
            intent="primary"
            onPress={() => handlePress('contained')}
          >
            Contained
          </Button>
          <Button 
            type="outlined" 
            intent="primary"
            onPress={() => handlePress('outlined')}
          >
            Outlined
          </Button>
          <Button 
            type="text" 
            intent="primary"
            onPress={() => handlePress('text')}
          >
            Text
          </Button>
        </View>
      </View>

       {/* Show all intents in theme (including extended intents) */}
      <View gap="md">
        <Text typography="subtitle1">All Intents</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          { (Object.keys(theme.intents) as Array<keyof typeof theme.intents>).map((intent) => (
            <Button 
              key={intent}
              type="contained" 
              intent={intent}
              onPress={() => handlePress(`intent-${intent}`)}
            >
              {intent.charAt(0).toUpperCase() + intent.slice(1)}
            </Button>
          )) }
        </View>
      </View>

      {/* Button Sizes */}
      <View gap="md">
        <Text typography="subtitle1">Sizes</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          <Button
            size="sm"
            type="contained"
            intent="primary"
            onPress={() => handlePress('sm')}
          >
            Small
          </Button>
          <Button
            size="md"
            type="contained"
            intent="primary"
            onPress={() => handlePress('md')}
          >
            Medium
          </Button>
          <Button
            size="lg"
            type="contained"
            intent="primary"
            onPress={() => handlePress('lg')}
          >
            Large
          </Button>
        </View>
      </View>

      {/* Button Intents */}
      <View gap="md">
        <Text typography="subtitle1">Intents</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button 
            intent="primary"
            type="contained"
            onPress={() => handlePress('primary')}
          >
            Primary
          </Button>
          <Button 
            intent="neutral"
            type="contained"
            onPress={() => handlePress('neutral')}
          >
            Neutral
          </Button>
          <Button 
            intent="success"
            type="contained"
            onPress={() => handlePress('success')}
          >
            Success
          </Button>
          <Button
            intent="danger"
            type="contained"
            onPress={() => handlePress('danger')}
          >
            Danger
          </Button>
          <Button 
            intent="warning"
            type="contained"
            onPress={() => handlePress('warning')}
          >
            Warning
          </Button>
        </View>
      </View>

      {/* Disabled States */}
      <View gap="md">
        <Text typography="subtitle1">Disabled States</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button
            type="contained"
            intent="primary"
            disabled
            onPress={() => handlePress('disabled-contained')}
          >
            Disabled Contained
          </Button>
          <Button
            type="outlined"
            intent="primary"
            disabled
            onPress={() => handlePress('disabled-outlined')}
          >
            Disabled Outlined
          </Button>
          <Button
            type="text"
            intent="primary"
            disabled
            onPress={() => handlePress('disabled-text')}
          >
            Disabled Text
          </Button>
        </View>
      </View>

      {/* Buttons with Icons */}
      <View gap="md">
        <Text typography="subtitle1">Buttons with Icons</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button
            type="contained"
            intent="primary"
            leftIcon="plus"
            onPress={() => handlePress('icon-left')}
          >
            Add Item
          </Button>
          <Button
            type="contained"
            intent="success"
            rightIcon="check"
            onPress={() => handlePress('icon-right')}
          >
            Save
          </Button>
          <Button
            type="contained"
            intent="danger"
            leftIcon="delete"
            rightIcon="alert"
            onPress={() => handlePress('icon-both')}
          >
            Delete
          </Button>
          <Button
            type="outlined"
            intent="primary"
            leftIcon="download"
            onPress={() => handlePress('icon-outlined')}
          >
            Download
          </Button>
          <Button
            type="text"
            intent="primary"
            leftIcon="pencil"
            onPress={() => handlePress('icon-text')}
          >
            Edit
          </Button>
        </View>
      </View>

      {/* Icon-only Buttons */}
      <View gap="md">
        <Text typography="subtitle1">Icon-only Buttons</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          <Button
            type="contained"
            intent="primary"
            leftIcon="home"
            size="sm"
            onPress={() => handlePress('icon-only-small')}
          />
          <Button
            type="contained"
            intent="primary"
            leftIcon="cog"
            size="md"
            onPress={() => handlePress('icon-only-medium')}
          />
          <Button
            type="contained"
            intent="primary"
            leftIcon="heart"
            size="lg"
            onPress={() => handlePress('icon-only-large')}
          />
          <Button
            type="outlined"
            intent="success"
            leftIcon="check-circle"
            onPress={() => handlePress('icon-only-outlined')}
          />
          <Button
            type="text"
            intent="danger"
            leftIcon="close-circle"
            onPress={() => handlePress('icon-only-text')}
          />
        </View>
      </View>

      {/* Different Intents with Icons */}
      <View gap="md">
        <Text typography="subtitle1">Icons with Different Intents</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button
            type="contained"
            intent="primary"
            leftIcon="information"
            onPress={() => handlePress('info')}
          >
            Info
          </Button>
          <Button
            type="contained"
            intent="success"
            leftIcon="check-circle"
            onPress={() => handlePress('success')}
          >
            Success
          </Button>
          <Button
            type="contained"
            intent="warning"
            leftIcon="alert"
            onPress={() => handlePress('warning')}
          >
            Warning
          </Button>
          <Button
            type="contained"
            intent="danger"
            leftIcon="alert-circle"
            onPress={() => handlePress('danger')}
          >
            Danger
          </Button>
        </View>
      </View>

      {/* Gradient Overlay */}
      <View gap="md">
        <Text typography="subtitle1">Gradient Overlay</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button
            type="contained"
            intent="primary"
            onPress={() => handlePress('no-gradient')}
          >
            No Gradient
          </Button>
          <Button
            type="contained"
            intent="primary"
            gradient="darken"
            onPress={() => handlePress('gradient-darken')}
          >
            Darken
          </Button>
          <Button
            type="contained"
            intent="primary"
            gradient="lighten"
            onPress={() => handlePress('gradient-lighten')}
          >
            Lighten
          </Button>
        </View>
      </View>

      {/* Gradient with Different Intents */}
      <View gap="md">
        <Text typography="subtitle1">Gradient Intents (Darken)</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button
            type="contained"
            intent="primary"
            gradient="darken"
            onPress={() => handlePress('gradient-primary')}
          >
            Primary
          </Button>
          <Button
            type="contained"
            intent="success"
            gradient="darken"
            onPress={() => handlePress('gradient-success')}
          >
            Success
          </Button>
          <Button
            type="contained"
            intent="danger"
            gradient="darken"
            onPress={() => handlePress('gradient-error')}
          >
            Error
          </Button>
          <Button
            type="contained"
            intent="warning"
            gradient="darken"
            onPress={() => handlePress('gradient-warning')}
          >
            Warning
          </Button>
          <Button
            type="contained"
            intent="neutral"
            gradient="darken"
            onPress={() => handlePress('gradient-neutral')}
          >
            Neutral
          </Button>
        </View>
      </View>

      {/* Gradient with Icons */}
      <View gap="md">
        <Text typography="subtitle1">Gradient with Icons</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button
            type="contained"
            intent="primary"
            gradient="darken"
            leftIcon="rocket-launch"
            onPress={() => handlePress('gradient-icon-launch')}
          >
            Launch
          </Button>
          <Button
            type="contained"
            intent="success"
            gradient="lighten"
            leftIcon="check"
            rightIcon="arrow-right"
            onPress={() => handlePress('gradient-icon-submit')}
          >
            Submit
          </Button>
          <Button
            type="contained"
            intent="danger"
            gradient="darken"
            leftIcon="delete"
            onPress={() => handlePress('gradient-icon-delete')}
          >
            Delete
          </Button>
        </View>
      </View>

      {/* Loading State */}
      <View gap="md">
        <Text typography="subtitle1">Loading State</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button
            type="contained"
            intent="primary"
            loading
            onPress={() => handlePress('loading-contained')}
          >
            Loading
          </Button>
          <Button
            type="outlined"
            intent="primary"
            loading
            onPress={() => handlePress('loading-outlined')}
          >
            Loading
          </Button>
          <Button
            type="text"
            intent="primary"
            loading
            onPress={() => handlePress('loading-text')}
          >
            Loading
          </Button>
        </View>
      </View>

      {/* Loading with Different Intents */}
      <View gap="md">
        <Text typography="subtitle1">Loading Intents</Text>
        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
          <Button
            type="contained"
            intent="primary"
            loading
            onPress={() => handlePress('loading-primary')}
          >
            Primary
          </Button>
          <Button
            type="contained"
            intent="success"
            loading
            onPress={() => handlePress('loading-success')}
          >
            Success
          </Button>
          <Button
            type="contained"
            intent="danger"
            loading
            onPress={() => handlePress('loading-error')}
          >
            Error
          </Button>
          <Button
            type="contained"
            intent="warning"
            loading
            onPress={() => handlePress('loading-warning')}
          >
            Warning
          </Button>
        </View>
      </View>

      {/* Interactive Loading Example */}
      <View gap="md">
        <Text typography="subtitle1">Interactive Loading</Text>
        <InteractiveLoadingButton />
      </View>
    </View>
    </Screen>
  );
};

// Interactive loading button component
const InteractiveLoadingButton = () => {
  const [loading, setLoading] = React.useState(false);

  const handlePress = async () => {
    setLoading(true);
    // Simulate async operation
    await new Promise(resolve => setTimeout(resolve, 2000));
    setLoading(false);
  };

  return (
    <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
      <Button
        type="contained"
        intent="primary"
        loading={loading}
        onPress={handlePress}
      >
        {loading ? 'Saving...' : 'Save'}
      </Button>
      <Button
        type="outlined"
        intent="success"
        loading={loading}
        leftIcon="check"
        onPress={handlePress}
      >
        {loading ? 'Processing...' : 'Submit'}
      </Button>
    </View>
  );
};