import { css } from 'styled-components';
import { getColorAlias } from '../../utils/index.js';

/**
 * Use this function to define the base and highlight colors for Skeleton component.
 * @param {AliasKey} baseKey - Alias to get the base color
 * @param {AliasKey} highlightKey - Alias to get the highlight color
 * @returns {CSS} - CSS background properties
 */
const getSkeletonColors = (variant, baseKey, highlightKey) => {
    const baseColor = getColorAlias(baseKey);
    const highlightColor = getColorAlias(highlightKey);
    const background = variant === 'star'
        ? css `
          background-image: linear-gradient(
            45deg,
            ${baseColor},
            ${highlightColor},
            ${baseColor}
          );
          background-size: 248px 100%;
        `
        : css `
          background-image: linear-gradient(
            90deg,
            ${baseColor},
            ${highlightColor},
            ${baseColor}
          );
          background-size: 200px 100%;
        `;
    return css `
    background-color: ${variant === 'star' ? null : baseColor};
    color: ${variant === 'star' ? baseColor : null};
    ${background}
    background-repeat: no-repeat;
  `;
};
/**
 * Use this function to define the dimensions for Skeleton component.
 * @param {SkeletonProps} props - Skeleton properties
 * @returns {CSS} - CSS height and width properties
 */
const getSkeletonDimensions = (props) => {
    var _a, _b, _c;
    let skeletonHeight;
    let skeletonWidth;
    switch (props.variant) {
        case 'box':
            skeletonHeight = '100px';
            break;
        case 'circle':
            skeletonHeight = '100px';
            skeletonWidth = '100px';
            break;
        case 'pill':
            skeletonHeight = '40px';
            break;
        case 'text':
            skeletonHeight = '20px';
            break;
        case 'star':
            skeletonHeight = '50px';
            skeletonWidth = '50px';
            break;
        default:
            skeletonHeight = '40px';
            break;
    }
    return css `
    height: ${(_a = props.height) !== null && _a !== void 0 ? _a : skeletonHeight};
    width: ${(_c = (_b = props.width) !== null && _b !== void 0 ? _b : skeletonWidth) !== null && _c !== void 0 ? _c : '100%'};
  `;
};
/**
 * Use this function to define the height for the Skeleton component.
 * @param {SkeletonProps} variant - Skeleton variants
 * @param {boolean} circle - Boolean to define if the radius value should be theme.radius.roundedE
 * @param {Theme} theme - Skeleton properties
 * @returns {CSS} - CSS border radius with the value
 */
const convertRoundedName = (radius) => {
    switch (radius) {
        case 'roundedA':
            return css `
        border-radius: ${(props) => props.theme.radius.roundedA};
      `;
        case 'roundedB':
            return css `
        border-radius: ${(props) => props.theme.radius.roundedB};
      `;
        case 'roundedC':
            return css `
        border-radius: ${(props) => props.theme.radius.roundedC};
      `;
        case 'roundedD':
            return css `
        border-radius: ${(props) => props.theme.radius.roundedD};
      `;
        case 'roundedNone':
            return css `
        border-radius: ${(props) => props.theme.radius.roundedNone};
      `;
        default:
            return null;
    }
};
const getSkeletonRadius = (props, theme) => {
    let radius = theme.radius.roundedA;
    if (props.variant === 'box') {
        if (props.radius) {
            return convertRoundedName(props.radius);
        }
        else {
            radius = theme.radius.roundedB;
        }
    }
    else if (props.variant === 'pill')
        radius = theme.radius.roundedD;
    else if (props.variant === 'circle')
        radius = theme.radius.roundedE;
    return css `
    border-radius: ${radius};
  `;
};
const getStar = (props) => {
    if (props === 'star') {
        return css `
      clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
      );
    `;
    }
};

export { getSkeletonColors, getSkeletonDimensions, getSkeletonRadius, getStar };
