import { Box, Columns, Column, FlagIcon, Text, Link } from "@canva/app-ui-kit";
import { requestOpenExternalUrl } from "@canva/platform";
import { FormattedMessage, useIntl } from "react-intl";
import { APP_NAME } from "src/config";

const REPORT_URL = `https://www.canva.com/help/report-content/?app=${APP_NAME}`;

/**
 * Component to display a box prompting users to report potentially inappropriate content generated by AI.
 * Providing users with a way to report inappropriate content is essential for maintaining a safe and respectful environment.
 */
export const ReportBox = (): JSX.Element => {
  const openExternalUrl = async (url: string) => {
    await requestOpenExternalUrl({
      url,
    });
  };

  const intl = useIntl();

  return (
    <Box padding="2u" background="neutralLow" borderRadius="standard">
      <Columns spacing="1.5u" alignY="center">
        <Column width="content">
          <FlagIcon />
        </Column>
        <Column>
          <Text alignment="start">
            <FormattedMessage
              defaultMessage="We’re evolving this new technology with you so please <link>report these images</link> if they don’t seem right."
              description="A message to prompt users to report potentially inappropriate content generated by AI"
              values={{
                link: (chunks) => (
                  <Link
                    href={REPORT_URL}
                    requestOpenExternalUrl={() => openExternalUrl(REPORT_URL)}
                    title={intl.formatMessage({
                      defaultMessage: "Report content",
                      description:
                        "A title for a link to report AI generated content that is problematic",
                    })}
                  >
                    {chunks}
                  </Link>
                ),
              }}
            />
          </Text>
        </Column>
      </Columns>
    </Box>
  );
};