import { jsx as _jsx } from "react/jsx-runtime";
import styled from 'styled-components';
import { spacing } from '../../spacing';
const BasicTextStyle = styled.span `
  color: ${(props) => props.theme.textPrimary};
  font-size: 1rem;
  line-height: ${spacing.r24};
  font-weight: 400;
`;
const SecondaryTextStyle = styled(BasicTextStyle) `
  color: ${(props) => props.theme.textSecondary};
`;
const LargerTextStyle = styled(BasicTextStyle) `
  font-size: 1.43rem;
  line-height: 1.5;
`;
const EmphaseTextStyle = styled(BasicTextStyle) `
  font-weight: 700;
`;
const StatusTextStyle = styled(BasicTextStyle) `
  color: ${(props) => props.theme[`${props.statusColor}`]};
`;
const LargetStyle = styled(BasicTextStyle) `
  font-size: 1.14rem;
  line-height: 1.5;
`;
const SmallerTextStyle = styled(BasicTextStyle) `
  font-size: 0.71rem;
  line-height: 1.4;
  letter-spacing: 2%; // to be defined, percentage value is not valid
`;
const SmallerSecondaryTextStyle = styled(SmallerTextStyle) `
  color: ${(props) => props.theme.textSecondary};
`;
const getStatusColor = (status) => {
    let statusColor;
    switch (status) {
        case 'healthy':
            statusColor = 'statusHealthy';
            break;
        case 'warning':
            statusColor = 'statusWarning';
            break;
        case 'critical':
            statusColor = 'statusCritical';
            break;
        default:
            statusColor = 'textSecondary';
    }
    return statusColor;
};
export const SmallerEmphaseTextStyle = styled(SmallerTextStyle) `
  font-weight: 700;
  color: ${(props) => props.theme[`${props.statusColor}`]};
`;
const ChartTitleTextStyle = styled(BasicTextStyle) `
  letter-spacing: ${spacing.r2};
`;
export function BasicText({ children, ...rest }) {
    return _jsx(BasicTextStyle, { ...rest, children: children });
}
export function SecondaryText({ children, ...rest }) {
    return _jsx(SecondaryTextStyle, { ...rest, children: children });
}
export function LargerText({ children, ...rest }) {
    return _jsx(LargerTextStyle, { ...rest, children: children });
}
export function EmphaseText({ children, ...rest }) {
    return _jsx(EmphaseTextStyle, { ...rest, children: children });
}
export function StatusText({ children, status, ...rest }) {
    const statusColor = getStatusColor(status);
    return (_jsx(StatusTextStyle, { statusColor: statusColor, ...rest, children: children }));
}
export function LargeText({ children, ...rest }) {
    return _jsx(LargetStyle, { ...rest, children: children });
}
export function SmallerText({ children, ...rest }) {
    return _jsx(SmallerTextStyle, { ...rest, children: children });
}
export function SmallerSecondaryText({ children, ...rest }) {
    return (_jsx(SmallerSecondaryTextStyle, { ...rest, children: children }));
}
export function SmallerEmphaseText({ children, status, ...rest }) {
    const statusColor = getStatusColor(status);
    return (_jsx(SmallerEmphaseTextStyle, { statusColor: statusColor, ...rest, children: children }));
}
export function ChartTitleText({ children, ...rest }) {
    return _jsx(ChartTitleTextStyle, { ...rest, children: children });
}
export const GentleEmphaseSecondaryText = styled(SecondaryText) `
  font-style: italic;
  ${(props) => props.alignRight
    ? `
    text-align: right;
    display: block;
  `
    : ''}
`;
export const Text = styled.span `
  color: ${(props) => props.theme[props.color || 'textPrimary']};
  ${(props) => props.variant === 'Larger'
    ? `
  font-size: 1.43rem;
  line-height: 1.5;
      `
    : props.variant === 'Large'
        ? `
  font-size: 1.14rem;
  line-height: 1.5;
      `
        : props.variant === 'Smaller'
            ? `
  font-size: 0.71rem;
  line-height: 1.4;
  letter-spacing: 2%;// to be defined, percentage value is not valid
      `
            : `
  font-size: 1rem;
  line-height: ${spacing.r24};
      `}

  ${(props) => props.isEmphazed
    ? `
  font-weight: 700;
      `
    : `
  font-weight: 400;
      `}

  ${(props) => props.isGentleEmphazed
    ? `
  font-style: italic;
      `
    : ``}
    
  ${(props) => props.variant === 'ChartTitle' && `letter-spacing: ${spacing.r2};`}
`;
export const Link = styled.a `
  font-size: 1rem;
  line-height: ${spacing.r24};
  color: ${(props) => props.theme.textLink};
  cursor: pointer;
  text-decoration-line: none;
  width: fit-content;
  &:hover {
    text-decoration-line: underline;
  }
  // :focus-visible is the keyboard-only version of :focus
  &:focus-visible {
    outline: dashed ${spacing.r2} ${(props) => props.theme.textLink};
    outline-offset: ${spacing.r2};
  }
`;
