import styles from './styles/rt-snackbar.module.css';
import config from './styles/component-values-snackbar.module.css';
import {
  CSSProperties,
  ForwardedRef,
  forwardRef,
  useId,
  useLayoutEffect,
  useMemo,
  useState,
} from 'react';
import { RtSnackbarProps } from './rt-snackbar.types';
import { RtFrame } from '@dpa/react-frame-intro';
import classNames from 'classnames/bind';
import { RtText } from '@dpa/react-text';
import { RtSymbolAction } from '@dpa/react-symbol-action';
import { RtBaseProps, useRtBaseProps } from '@dpa/react-hoc';
import {
  useGridChild,
  RtGridRadius,
  RtGridChildContext,
} from '@dpa/react-grid';

const cn = classNames.bind(styles);

export const RtSnackbar = forwardRef(
  (
    props: RtSnackbarProps & RtBaseProps<HTMLDivElement>,
    ref: ForwardedRef<HTMLDivElement>
  ) => {
    const {
      radius = 'primary',
      width = 'min-content',
      inheritRadiusFrom,
    } = props;
    const { id: propId, ...baseProps } = useRtBaseProps(props, '0.2.2');

    const localId = useId();
    const id = propId || localId;

    const TrailingAction = props.trailingAction || RtSymbolAction.Clear;

    const { gridChildClassname, gridAttributes } = useGridChild({
      size: 'sm',
      radius: radius as RtGridRadius,
    });

    const isInheritBottom = radius === 'inherit-bottom';
    const [inheritRadius, setInheritRadius] = useState({
      bl: '0px',
      br: '0px',
    });

    useLayoutEffect(() => {
      setTimeout(() => {
        if (
          inheritRadiusFrom?.current &&
          isInheritBottom &&
          typeof window !== 'undefined'
        ) {
          const { borderTopLeftRadius: tl, borderTopRightRadius: tr } =
            window.getComputedStyle(inheritRadiusFrom.current);
          setInheritRadius({ bl: tl, br: tr });
        }
      }, 0);
    }, [inheritRadiusFrom, isInheritBottom]);

    const computedStyles = useMemo(() => {
      const styles: CSSProperties = {};
      if (inheritRadius && isInheritBottom) {
        styles.borderBottomLeftRadius = inheritRadius.bl;
        styles.borderBottomRightRadius = inheritRadius.br;
      }
      return styles;
    }, [inheritRadius, isInheritBottom]);

    return (
      <RtFrame
        as="div"
        isFontSizeProvider
        ref={ref}
        surface={props.surface}
        use={props.use}
        modifier={props.modifier}
        className={cn(
          'rt-snackbar',
          config['rt-snackbar-sm'],
          `rt-snackbar--${radius}`,
          `rt-snackbar--${width}`,
          {
            [gridChildClassname]: radius !== 'inherit-bottom',
          }
        )}
        id={id}
        style={computedStyles}
        {...baseProps}
        {...(isInheritBottom ? {} : gridAttributes)}
      >
        <RtGridChildContext.Provider value={null}>
          <RtText
            className={cn('rt-snackbar__text')}
            typography="symbol-sm-secondary"
            specification="main"
          >
            {props.hint}
          </RtText>
          <TrailingAction
            width="min-content"
            height="min-content"
            label={props.trailingActionLabel}
            symbol={props.trailingActionSymbol as any}
            specification="variant"
            icon={!!props.trailingAction}
            onClick={props.onTrailingActionClick}
          />
        </RtGridChildContext.Provider>
      </RtFrame>
    );
  }
);

RtSnackbar.displayName = 'RtSnackbar';