import { Button, Flex, Text } from '@/ui';
import { useDisclosure } from '@/utils/disclosure';
import React, { FC } from 'react';


import {
  FallbackProps,
  ErrorBoundary as ReactErrorBoundary,
} from 'react-error-boundary';
import { LuChevronUp, LuChevronDown } from 'react-icons/lu';

const ErrorFallback = ({ error }: FallbackProps) => {
  const { open, onToggle } = useDisclosure();
  return (
    <Flex direction="column" style={{ padding: 4, margin: "auto", backgroundColor: "red.500" }}>
      <Text color='red'>An unexpected error has occurred.</Text>
      <Text>Message: {error.message}</Text>
      {/*
      <AlertRoot status="error" borderRadius="md">
        <Flex style={{ flex: "1" }}>
          <AlertTitle>An unexpected error has occurred.</AlertTitle>
          <AlertDescription display="block" lineHeight="1.4">
            <Button
              //theme="@secondary"
              color="red.800"
              //size="sm"
              onClick={onToggle}
            >
              Show details {open ? <LuChevronUp /> : <LuChevronDown />}
            </Button>
            <Collapsible.Root open={open}>
              <Collapsible.Content>
                <Flex mt={4} fontFamily="monospace">
                  {error.message}
                </Flex>
              </Collapsible.Content>
            </Collapsible.Root>
          </AlertDescription>
        </Flex>
      </AlertRoot> */}
    </Flex >
  );
};

export const ErrorBoundary: FC<React.PropsWithChildren<unknown>> = (props) => {
  return <ReactErrorBoundary FallbackComponent={ErrorFallback} {...props} />;
};