import React from 'react';
import { Box, Button, Typography, Stack } from '@mui/material';
import { useDialog } from '../hooks/useDialog';

const DialogExample: React.FC = () => {
  const dialog = useDialog();

  // 确认对话框示例
  const handleConfirmDialog = async () => {
    try {
      const confirmed = await dialog.confirm({
        title: '确认删除',
        content: `确定要删除用户 "张三" 吗？此操作不可恢复。`,
        confirmText: '删除',
        cancelText: '取消',
        onConfirm: async () => {
          // 模拟异步操作
          await new Promise(resolve => setTimeout(resolve, 1000));
          console.log('用户已删除');
        }
      });

      if (confirmed) {
        console.log('用户确认删除');
      } else {
        console.log('用户取消删除');
      }
    } catch (error) {
      console.error('删除操作失败:', error);
    }
  };

  // 信息对话框示例
  const handleInfoDialog = async () => {
    await dialog.info({
      title: '系统信息',
      content: '这是一个信息提示对话框，用于显示重要信息。',
      confirmText: '我知道了'
    });
  };

  // 成功对话框示例
  const handleSuccessDialog = async () => {
    await dialog.success({
      title: '操作成功',
      content: '您的操作已成功完成！',
      confirmText: '好的'
    });
  };

  // 警告对话框示例
  const handleWarningDialog = async () => {
    await dialog.warning({
      title: '警告',
      content: '请注意：此操作可能会影响系统性能，建议在非高峰期执行。',
      confirmText: '了解'
    });
  };

  // 错误对话框示例
  const handleErrorDialog = async () => {
    await dialog.error({
      title: '操作失败',
      content: '抱歉，操作执行失败。请检查网络连接后重试。',
      confirmText: '重试'
    });
  };

  // 自定义对话框示例
  const handleCustomDialog = async () => {
    const result = await dialog.openDialog({
      title: '自定义对话框',
      content: (
        <Box>
          <Typography variant="body1" gutterBottom>
            这是一个自定义内容的对话框。
          </Typography>
          <Typography variant="body2" color="text.secondary">
            您可以在这里放置任何React组件。
          </Typography>
        </Box>
      ),
      type: 'confirm',
      confirmText: '同意',
      cancelText: '拒绝',
      width: 600,
      maskClosable: false,
      onConfirm: async () => {
        await new Promise(resolve => setTimeout(resolve, 500));
        console.log('用户同意了自定义操作');
      }
    });

    console.log('自定义对话框结果:', result);
  };

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" gutterBottom>
        Dialog 使用示例
      </Typography>
      
      <Typography variant="body1" sx={{ mb: 3 }}>
        以下是各种类型对话框的使用示例：
      </Typography>

      <Stack spacing={2} direction="row" flexWrap="wrap" gap={2}>
        <Button 
          variant="contained" 
          color="error"
          onClick={handleConfirmDialog}
        >
          确认对话框
        </Button>

        <Button 
          variant="contained" 
          color="info"
          onClick={handleInfoDialog}
        >
          信息对话框
        </Button>

        <Button 
          variant="contained" 
          color="success"
          onClick={handleSuccessDialog}
        >
          成功对话框
        </Button>

        <Button 
          variant="contained" 
          color="warning"
          onClick={handleWarningDialog}
        >
          警告对话框
        </Button>

        <Button 
          variant="contained" 
          color="error"
          onClick={handleErrorDialog}
        >
          错误对话框
        </Button>

        <Button 
          variant="outlined"
          onClick={handleCustomDialog}
        >
          自定义对话框
        </Button>
      </Stack>

      <Box sx={{ mt: 4 }}>
        <Typography variant="h6" gutterBottom>
          使用方法：
        </Typography>
        <Typography variant="body2" component="pre" sx={{ 
          backgroundColor: 'grey.100', 
          p: 2, 
          borderRadius: 1,
          fontFamily: 'monospace',
          whiteSpace: 'pre-wrap'
        }}>
{`const dialog = useDialog();

// 确认对话框
const confirmed = await dialog.confirm({
  title: '确认删除',
  content: '确定要删除用户 "张三" 吗？此操作不可恢复。',
  confirmText: '删除',
  cancelText: '取消',
});

// 信息对话框
await dialog.info({
  title: '系统信息',
  content: '这是一个信息提示。',
});

// 其他类型
await dialog.success({ ... });
await dialog.warning({ ... });
await dialog.error({ ... });`}
        </Typography>
      </Box>
    </Box>
  );
};

export default DialogExample;