import {
  Box,
  CopyClipboard,
  Popover,
  Text,
  TextButton,
  TextSize,
} from '@wix/design-system';
import React, { useEffect, useMemo } from 'react';
import { DuplicateSmall, InfoCircleSmall } from '@wix/wix-ui-icons-common';

export interface RequestIdProps {
  /**
   * Request ID value.
   * @external
   */
  value: string;
  /**
   * Appearance of the component.
   * @external
   */
  appearance?: 'standard' | 'light';
  /**
   * Locale to use for translations.
   * @external
   */
  locale: string;
  /**
   * Data hook for testing purposes
   * @external
   */
  dataHook?: string;
}

export const RequestId = (props: RequestIdProps) => {
  const { value, appearance, locale, dataHook = 'request-id' } = props;

  const firstValue = value.split(',')[0];
  const [messages, setMessages] = React.useState<{
    description: string;
    cta: string;
    copiedSuccess: string;
  } | null>(null);

  useEffect(() => {
    const loadMessages = async () => {
      try {
        const module = await import(
          /* webpackChunkName: `request-id-locale-messages-[request]-json` */ `./assets/locale/messages_${locale}.json`
        );
        setMessages(module.default);
      } catch (error) {
        setMessages(require('./assets/locale/messages_en.json'));
      }
    };

    loadMessages();
  }, [locale]);

  const [shown, setShown] = React.useState(false);
  const openPopover = () => setShown(true);
  const closePopover = () => setShown(false);

  const appearanceStyle = useMemo(() => {
    if (appearance === 'light') {
      return {
        infoIconColor: 'var(--wsr-color-D40, #868aa5)',
        textSize: 'small' as TextSize,
        textLight: true,
      };
    }
    return {
      infoIconColor: 'var(--wsr-color-100, #116DFF)',
      textSize: 'tiny' as TextSize,
      textLight: false,
    };
  }, [appearance]);

  return (
    <Box gap="3px" dataHook={dataHook} justifyItems="center">
      <Box placeItems="center">
        <Text
          size={appearanceStyle.textSize}
          weight="thin"
          light={appearanceStyle.textLight}
          secondary
          dataHook="request-id-value"
        >
          {`Request ID: ${firstValue}`}
        </Text>
      </Box>
      <Popover
        showArrow
        animate
        placement="auto"
        shown={shown}
        onMouseEnter={() => openPopover()}
        onMouseLeave={() => closePopover()}
        dataHook="request-id-popover"
        zIndex={6000} // showToast z-index is 5500
        appendTo="window"
      >
        <Popover.Element>
          <Box>
            <TextButton
              size="small"
              as="button"
              ariaLabel="click me for details"
              dataHook="request-id-trigger-element"
              prefixIcon={
                <InfoCircleSmall
                  fill={appearanceStyle.infoIconColor}
                  cursor="default"
                />
              }
            />
          </Box>
        </Popover.Element>
        <Popover.Content>
          <Box padding="24px 24px" width={350} display="block">
            <div>
              <Text
                size="small"
                skin="standard"
                weight="thin"
                dataHook="request-id-description"
              >
                {messages?.description}
              </Text>
            </div>
            <Box marginTop={2}>
              <CopyClipboard value={value}>
                {({ isCopied, copyToClipboard }) => (
                  <TextButton
                    prefixIcon={<DuplicateSmall />}
                    size="small"
                    onClick={() => copyToClipboard()}
                    dataHook="request-id-copy-button"
                  >
                    {isCopied ? messages?.copiedSuccess : messages?.cta}
                  </TextButton>
                )}
              </CopyClipboard>
            </Box>
          </Box>
        </Popover.Content>
      </Popover>
    </Box>
  );
};