import React from 'react';
import cn from 'classnames';

import { Skeleton } from '@alfalab/core-components-skeleton';

import { useTabs } from '../../hooks/use-tabs';
import { type PlatformProps, type SecondaryTabListProps, type Styles } from '../../typings';
import { ScrollableContainer } from '../scrollable-container';

function getBorderRadius(
    shape?: SecondaryTabListProps['tagShape'],
    size?: SecondaryTabListProps['size'],
    isMobile?: boolean,
) {
    if (shape === 'rounded') {
        return 99;
    }

    if (size === 'xxs') return isMobile ? 8 : 6;
    if (size === 'xs' || size === 's') return isMobile ? 12 : 8;

    return isMobile ? 16 : 4;
}

export const SecondaryTabList = ({
    styles = {},
    className,
    containerClassName,
    scrollControlsContainerClassName,
    scrollControlsButtonClassName,
    size,
    titles = [],
    selectedId = titles.length ? titles[0].id : undefined,
    scrollable = true,
    fullWidthScroll,
    tagSize = 40,
    onChange,
    dataTestId,
    TagComponent,
    platform,
    tagShape = 'rounded',
    tagView,
    inlineStyle,
    showSkeleton,
    skeletonProps,
}: SecondaryTabListProps & Styles & PlatformProps) => {
    const { focusedTab, selectedTab, getTabListItemProps } = useTabs({
        titles,
        selectedId,
        onChange,
    });

    const renderContent = () => {
        if (!TagComponent) return null;

        return (
            <div
                role='tablist'
                data-test-id={dataTestId}
                className={cn(styles.component, className, size && styles[size], {
                    [styles.fullWidthScroll]: fullWidthScroll,
                })}
            >
                {titles.map((item, index) => {
                    if (item.hidden) return null;

                    const renderTab = () => (
                        <TagComponent
                            {...getTabListItemProps(index)}
                            shape={tagShape}
                            view={tagView}
                            key={item.id}
                            className={cn(styles.title, item.toggleClassName)}
                            checked={item.id === selectedId}
                            size={tagSize}
                            rightAddons={item.rightAddons}
                        >
                            {item.title}
                        </TagComponent>
                    );

                    return showSkeleton ? (
                        <Skeleton
                            {...skeletonProps}
                            className={cn(styles.skeleton, skeletonProps?.className)}
                            key={item.id}
                            visible={true}
                            style={{
                                ...skeletonProps?.style,
                                borderRadius: getBorderRadius(
                                    tagShape,
                                    (
                                        {
                                            32: 'xxs',
                                            40: 'xs',
                                            48: 's',
                                            56: 'm',
                                            64: 'l',
                                            72: 'xl',
                                        } as const
                                    )[tagSize],
                                    platform === 'mobile',
                                ),
                            }}
                        >
                            {renderTab()}
                        </Skeleton>
                    ) : (
                        renderTab()
                    );
                })}
            </div>
        );
    };

    return scrollable ? (
        <ScrollableContainer
            activeChild={focusedTab || selectedTab}
            containerClassName={containerClassName}
            scrollControlsClassName={scrollControlsContainerClassName}
            scrollControlsButtonClassName={scrollControlsButtonClassName}
            fullWidthScroll={fullWidthScroll}
            view='secondary'
            size={size}
            platform={platform}
            inlineStyle={inlineStyle}
            showSkeleton={showSkeleton}
        >
            {renderContent()}
        </ScrollableContainer>
    ) : (
        <div className={cn(styles.container, containerClassName)} style={inlineStyle}>
            {renderContent()}
        </div>
    );
};