import React from 'react';
import isString from 'lodash/isString';
import {ColorItem, IconItem, Typeset} from '@storybook/blocks';
import type {
    TypographySizesType,
    TypographyWeights,
} from '../../components/common/atoms/typography/typography.type';

export const colorToPalette = (
    colorObj: string | Object,
    prefixName?: string,
) => {
    return Object.entries(colorObj).map(([colorName, colorValue], index) => {
        const title = prefixName ? `${prefixName}.${colorName}` : colorName;
        if (isString(colorValue))
            return (
                <ColorItem
                    key={index}
                    title={title}
                    subtitle={colorName}
                    colors={[colorValue]}
                />
            );
        else
            return (
                <div key={index}>
                    {colorToPalette(colorValue, title)}
                    <ColorItem
                        title={title}
                        subtitle={colorName}
                        colors={Object.values(colorValue)}
                    />
                </div>
            );
    });
};

export const fontToPalette = (
    fontSizes: Record<TypographySizesType, string>,
    fontWeight: Record<TypographyWeights, TypographyWeights>,
    fontFamily: string,
    sampleText: string = 'this is test text.',
) => {
    return Object.entries(fontWeight).map(
        ([fontWeightName, fontWeightValue], index) => {
            return (
                <div key={index}>
                    <h5>{`font family: ${fontFamily}, font weight: ${fontWeightName}`}</h5>
                    <Typeset
                        fontSizes={Object.values(fontSizes)?.reverse()}
                        fontWeight={fontWeightValue}
                        sampleText={sampleText}
                        fontFamily={fontFamily}
                    />
                </div>
            );
        },
    );
};

export const generateIconGallery = (IconModule: Object) => {
    return Object.entries(IconModule).map(([iconName, Icon], key) => {
        return (
            <IconItem key={key} name={iconName}>
                <Icon />
            </IconItem>
        );
    });
};