import React from 'react';

import { css, cx } from '@leafygreen-ui/emotion';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
import { HTMLElementProps } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';
import { transitionDuration } from '@leafygreen-ui/tokens';

const AtlasBlobPath = (props: HTMLElementProps<'path'>) => (
  <path
    {...props}
    d="M22.5325 8C15.611 8 10 13.6073 10 20.5244V45.4756C10 52.3927 15.611 58 22.5325 58H72.4675C79.389 58 85 52.3927 85 45.4756C85 38.5586 79.389 32.9513 72.4675 32.9513H47.5488C40.6542 32.9513 35.065 27.3657 35.065 20.4756C35.065 13.5855 29.4271 8 22.5325 8Z"
  />
);

const RealmBlobPath = (props: HTMLElementProps<'path'>) => (
  <path
    {...props}
    d="M24.5325 4C17.611 4 12 9.611 12 16.5325C12 23.4271 17.5892 29.065 24.4837 29.065C31.3783 29.065 36.9675 34.6542 36.9675 41.5488V54.0325C36.9675 67.8217 48.1946 79 61.9837 79C75.7998 79 87 67.7998 87 53.9837C87 40.1946 75.8217 28.9675 62.0325 28.9675H49.5488C42.6542 28.9675 37.065 23.3783 37.065 16.4837C37.065 9.58916 31.4271 4 24.5325 4Z"
  />
);

const ChartsBlobPath = (props: HTMLElementProps<'path'>) => (
  <path
    {...props}
    d="M12.5366 8C5.61282 8 0 13.6073 0 20.5244C0 27.4145 5.59098 33.0487 12.4878 33.0487C19.3846 33.0487 24.9756 38.6343 24.9756 45.5244C24.9756 52.4145 30.5666 58 37.4634 58H87.4634C94.3872 58 100 52.3927 100 45.4756V20.5244C100 13.6073 94.3872 8 87.4634 8H62.439C55.5422 8 49.9512 13.6099 49.9512 20.5C49.9512 27.3632 44.3821 32.9513 37.5122 32.9513C30.6423 32.9513 25.0732 27.3632 25.0732 20.5C25.0732 13.6099 19.4334 8 12.5366 8Z"
  />
);

const CloudManagerBlobPath = (props: HTMLElementProps<'path'>) => (
  <path
    {...props}
    d="M14.5325 81C21.4271 81 27.065 75.4108 27.065 68.5162C27.065 61.6217 32.6542 56.0325 39.5487 56.0325L52.0325 56.0325C65.8216 56.0325 77 44.8054 77 31.0162C77 17.2002 65.7998 6 51.9837 6C38.1946 6 26.9675 17.1783 26.9675 30.9675V43.4512C26.9675 50.3458 21.3783 55.935 14.4837 55.935C7.58915 55.935 1.99999 61.5729 1.99999 68.4675C1.99999 75.389 7.61098 81 14.5325 81Z"
  />
);

const Blob = ({ children, ...rest }: HTMLElementProps<'svg'>) => {
  const { darkMode } = useDarkMode();
  return (
    <svg
      width="100"
      height="45"
      viewBox="0 0 100 45"
      fill={darkMode ? palette.green.dark3 : palette.green.light3}
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
      className={cx(
        css`
          position: absolute;
          transition: fill ${transitionDuration.faster}ms ease-in-out;
        `,
        rest.className,
      )}
    >
      {children}
    </svg>
  );
};

export const AtlasBlob = React.memo(({ ...props }: HTMLElementProps<'svg'>) => (
  <Blob {...props}>
    <AtlasBlobPath />
  </Blob>
));
AtlasBlob.displayName = 'AtlasBlob';

export const RealmBlob = React.memo(({ ...props }: HTMLElementProps<'svg'>) => (
  <Blob {...props}>
    <RealmBlobPath />
  </Blob>
));
RealmBlob.displayName = 'RealmBlob';

export const ChartsBlob = React.memo(
  ({ ...props }: HTMLElementProps<'svg'>) => (
    <Blob {...props}>
      <ChartsBlobPath />
    </Blob>
  ),
);
ChartsBlob.displayName = 'ChartsBlob';

export const CloudManagerBlob = React.memo(
  ({ ...props }: HTMLElementProps<'svg'>) => (
    <Blob {...props}>
      <CloudManagerBlobPath />
    </Blob>
  ),
);
CloudManagerBlob.displayName = 'CloudManagerBlob';