import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
import React from 'react';
import { PlaylistsBlock } from '../menuComponents/PlaylistsBlock';
import { IAlbum, IGenre, IPlaylist, ISong } from '../../models/IModels';
import { NewSongsBlock } from '../menuComponents/NewSongsBlock';
import { FullPlaylistBlock } from '../menuComponents/FullPlaylistBlock';
import { width } from '@mui/system';
import TabPane from 'antd/es/tabs/TabPane';
import { ChartSongsBlock } from '../menuComponents/ChartSongsBlock';

interface MenuBlockProps {
    playlists?: IPlaylist[],
    songs?: ISong[],
    albums?: IAlbum[],
    genres?: IGenre[],
}

export function MenuBlock({playlists, songs, albums, genres}: MenuBlockProps) {
    const newSongsTab = {
        label: 'Новинки',
        key: 'New',
        children: songs? <NewSongsBlock /> : null
    };
    const playlistsTab = {
        label: 'Плейлисты',
        key: 'Playlists',
        children: playlists && genres ? <FullPlaylistBlock playlists={playlists} genres={genres}/> : null
    };
    
    const chartTab = {
        label: 'Чарт',
        key: 'Chart',
        children: songs? <ChartSongsBlock /> : null
    };

    const recTab = {
        label: 'Рекомендации',
        key: 'Recomendations',
        children: songs? <NewSongsBlock /> : null
    };
    const tabs = [recTab, newSongsTab, chartTab, playlistsTab];

    return (
        <div className="flex" style={{display: 'flex', alignSelf: 'flex-start', width: 'fit-content'}}>
            <Tabs
            
                type="line"
                className='container flex justify-start menu-block'
                defaultActiveKey="New"
                items={tabs}
                style={{padding: '1%'}}
            >
            </Tabs>
        </div>
        
        
    );
}