import { forwardRef } from 'react';

import { Container, ContainerRef } from '@cleartrip/ct-design-container';
import { Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
import { useStyles } from '@cleartrip/ct-design-style-manager';

import type { IAlertCalloutProps } from './type';
import staticStyles, { getAlertCalloutColourCode } from './style';

const AlertCallout = forwardRef<ContainerRef, IAlertCalloutProps>(
  ({ textNode, rightActionNode, prefixIconNode, variant, description, onClick, styleConfig }, forwardedRef) => {
    const {
      root = [],
      rootContainer = [],
      prefixIconContainer = [],
      textNodeContainerWrapper = [],
      textNodeContainer = [],
      rightActionContainer = [],
    } = styleConfig || {};

    const dynamicStyles = useStyles(
      () => ({
        variantBackground: {
          backgroundColor: getAlertCalloutColourCode(variant),
        },
      }),
      [variant],
    );

    return (
      <Container
        ref={forwardedRef}
        onClick={onClick}
        styleConfig={{
          root: [
            staticStyles.rootContainer,
            dynamicStyles.variantBackground,
            ...(Array.isArray(root) ? root : root ? [root] : []),
          ],
        }}
      >
        <Container styleConfig={{ root: [staticStyles.flexRowBetween] }}>
          <Container
            styleConfig={{
              root: [
                staticStyles.flexRow,
                ...(Array.isArray(rootContainer) ? rootContainer : rootContainer ? [rootContainer] : []),
              ],
            }}
          >
            {!!prefixIconNode && (
              <Container
                styleConfig={{
                  root: [staticStyles.flexMiddle, staticStyles.prefixIconSpacing, ...prefixIconContainer],
                }}
              >
                {prefixIconNode}
              </Container>
            )}

            <Container
              styleConfig={{
                root: [staticStyles.flexMiddle, ...textNodeContainerWrapper],
              }}
            >
              {typeof textNode === 'string' ? (
                <Typography
                  variant={TypographyVariant.P3}
                  styleConfig={{
                    root: [...textNodeContainer],
                  }}
                >
                  {textNode}
                </Typography>
              ) : (
                textNode
              )}
            </Container>
          </Container>

          {!!rightActionNode && (
            <Container
              styleConfig={{
                root: [staticStyles.rightActionSpacing, ...rightActionContainer],
              }}
            >
              {rightActionNode}
            </Container>
          )}
        </Container>
        {!!description && description}
      </Container>
    );
  },
);

AlertCallout.displayName = 'AlertCallout';
export default AlertCallout;