import { getClassNames, withSchema } from '@websolutespa/bom-core';
import { ComponentPropsWithRef, forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { UIComponentWithRef, UIStyledComponentProps } from '../../components/types';
import { getCssResponsive } from '../../components/utils';
import { IThemeFontVariant } from '../../theme';
import { IResponsiveVariant, getFontVariantResponsive } from '../../variants';

export type ITextProps = IResponsiveVariant<IThemeFontVariant> & {
  gradient?: boolean;
};

export type TextProps = UIStyledComponentProps<ITextProps>;

export type TextComponent<C extends React.ElementType = 'div'> = UIComponentWithRef<C, ITextProps>;

const StyledText = styled.div<TextProps>`
  ${props => getFontVariantResponsive(props, (variant, font) => css`
    ${font.fontFamily ? css`font-family: var(--font-${variant}-font-family, var(--base-font-family));` : ''}
    ${font.fontSize ? css`font-size: var(--font-${variant}-font-size, 1rem);` : ''}
    ${font.lineHeight ? css`line-height: var(--font-${variant}-line-height, 1);` : ''}
    ${font.fontWeight ? css`font-weight: var(--font-${variant}-font-weight, inherit);` : ''}
    ${font.fontStyle ? css`font-style: var(--font-${variant}-font-style, inherit);` : ''}
    ${font.letterSpacing ? css`letter-spacing: var(--font-${variant}-letter-spacing, inherit);` : ''}
    ${font.textTransform ? css`text-transform: var(--font-${variant}-text-transform, inherit);` : ''}
    //
    ${font.family ? css`font-family: var(--font-${variant}-family, var(--base-font-family));` : ''}
    ${font.size ? css`font-size: var(--font-${variant}-size, 1rem);` : ''}
  `)};
  ${props => props.gradient ? css`
    display: -webkit-inline-box;
    background: -webkit-linear-gradient(0deg, var(--color-secondary-500), var(--color-primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  ` : ''}
  ${props => getCssResponsive(props)}
`;

export const TextBase: TextComponent = forwardRef<HTMLDivElement, TextBaseProps>(
  function Text({
    children, className, as = 'div', ...props
  }, ref) {
    const classNames = getClassNames('text', className, props.variant);
    return (<StyledText className={classNames} ref={ref} as={as} {...props}>{children}</StyledText>);
  }
);

export type TextBaseProps = ComponentPropsWithRef<typeof TextBase>;

export type ITextHtmlProps = Omit<ITextProps, 'children'> & { children?: string };

export type TextHtmlProps = UIStyledComponentProps<ITextHtmlProps>;

export type TextHtmlComponent<C extends React.ElementType = 'div'> = UIComponentWithRef<C, ITextHtmlProps>;

export const TextHtml: TextHtmlComponent = forwardRef(
  function TextHtml({
    children, className, as = 'div', ...props
  }, ref) {
    const classNames = getClassNames('text', 'wysiwyg', className, props.variant);
    return (<StyledText className={classNames} ref={ref} as={as} {...props} dangerouslySetInnerHTML={{ __html: children }} />);
  }
);

const TextSROnly = styled.div<TextProps>`
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
`;

export const Text = withSchema(
  TextBase,
  {
    Html: TextHtml,
    SROnly: TextSROnly,
  });