/** @jsxImportSource @compiled/react */
import { styled } from '@compiled/react';
import {
  VerticalStack,
  Heading,
  CodeBlock,
  colors,
  Text,
} from '@compiled/website-ui';
import { Link } from 'react-router-dom';
import { MDXProviderComponentsProp } from '@mdx-js/react';
import { Anchor } from './anchor';

const Hr = styled.hr`
  color: rgba(0, 0, 0, 0.1);
  margin: 6rem 0;
`;

const Quote = styled.blockquote`
  padding: 3rem;
  margin: 4rem -3rem;
  border-left: 4px solid ${colors.primary};
  background-color: #8777d926;
  opacity: 0.8;

  p {
    margin: 0;
  }
`;

const Code = styled.code`
  font-size: 0.9em;
  margin-top: 20px;
  color: currentColor;
  font-weight: 400;
  background-color: rgba(117, 63, 131, 0.07);
  border-radius: 5px;
  margin: 0;
  padding: 0.2rem 0.325rem;
  font-family: 'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono',
    'Ubuntu Mono', Menlo, Consolas, Courier, monospace;
`;

const P = styled.p`
  margin: 4rem 0;
`;

export const mdxComponents: MDXProviderComponentsProp = {
  h1: ({ children }) => (
    <Heading look="h100">
      <Anchor>{children}</Anchor>
    </Heading>
  ),
  h2: ({ children }) => (
    <Heading css={{ marginTop: 68 }} look="h200">
      <Anchor>{children}</Anchor>
    </Heading>
  ),
  h3: ({ children }) => (
    <Heading css={{ marginTop: 60 }} look="h300">
      <Anchor>{children} </Anchor>
    </Heading>
  ),
  h4: ({ children }) => (
    <Heading css={{ marginTop: 52 }} look="h400">
      <Anchor>{children}</Anchor>
    </Heading>
  ),
  h5: ({ children }) => (
    <Heading css={{ marginTop: 44 }} look="h500">
      <Anchor>{children} </Anchor>
    </Heading>
  ),
  p: ({ children }) => (
    <P>
      <Text>{children}</Text>
    </P>
  ),
  pre: ({ children }) => children,
  code: ({ children, className }) => (
    <VerticalStack spacing={2}>
      <CodeBlock language={className ? className.split('-')[1] : undefined}>
        {children}
      </CodeBlock>
    </VerticalStack>
  ),
  hr: () => <Hr />,
  inlineCode: ({ children }) => <Code>{children}</Code>,
  a: ({ href, children, ...props }) =>
    href.startsWith('http') || href.startsWith('./') || href.startsWith('#') ? (
      <a
        href={href}
        css={{
          color: colors.primary,
          textDecoration: 'none',
          ':hover': { textDecoration: 'underline' },
        }}
        target={href.startsWith('#') ? undefined : '_blank'}
        rel="noopener noreferrer"
        {...props}>
        {children}
      </a>
    ) : (
      <Link
        to={href}
        css={{
          color: colors.primary,
          textDecoration: 'none',
          ':hover': { textDecoration: 'underline' },
        }}
        {...props}>
        {children}
      </Link>
    ),
  blockquote: (props) => <Quote {...props} />,
  strong: (props) => <strong css={{ fontWeight: 500 }} {...props} />,
  ol: (props) => <VerticalStack as="ol" spacing={4} gap={2} {...props} />,
  ul: (props) => <VerticalStack as="ul" spacing={4} gap={2} {...props} />,
  li: (props) => <Text as="li" {...props} />,
  td: (props) => (
    <td>
      <Text as="td" {...props} />
    </td>
  ),
  th: (props) => (
    <th>
      <Text as="th" weight="bold" {...props} />
    </th>
  ),
  table: (props) => <table {...props} css={{ marginTop: '4rem' }} />,
};