/**
 * WordPress dependencies
 */
 import { __ } from '@wordpress/i18n';
const { Fragment } = wp.element;
const { withFilters } = wp.components;
const { TabPanel, Panel, PanelBody } = wp.components;
import ChangelogItem from './changelog-item';

export const ChangelogTab = () => {
	const tabs = [
		{
			name: 'code4rest',
			title: __( 'Changelog', 'code4rest' ),
			className: 'code4rest-changelog-tab',
		},
		{
			name: 'pro',
			title: __( 'Pro Changelog', 'code4rest' ),
			className: 'code4rest-pro-changelog-tab',
		},
	];
	return (
		<Fragment>
			{ code4restDashboardParams.changelog && (
				<Fragment>
					{ code4restDashboardParams.proChangelog && code4restDashboardParams.proChangelog.length && (
						<TabPanel className="code4rest-dashboard-changelog-tab-panel"
							activeClass="active-tab"
							tabs={ tabs }>
							{
								( tab ) => {
									switch ( tab.name ) {
										case 'code4rest':
											return (
												<Panel className="code4rest-changelog-section tab-section">
													<PanelBody
														opened={ true }
													>
														{ code4restDashboardParams.changelog.map( ( item, index ) => {
															return <ChangelogItem
																item={ item }
																index={ item }
															/>;
														} ) }
													</PanelBody>
												</Panel>
											);

										case 'pro':
											return (
												<Panel className="pro-changelog-section tab-section">
													<PanelBody
														opened={ true }
													>
														{ code4restDashboardParams.proChangelog.map( ( item, index ) => {
															return <ChangelogItem
																item={ item }
																index={ item }
															/>;
														} ) }
													</PanelBody>
												</Panel>
											);
									}
								}
							}
						</TabPanel>
					) }
					{ ( '' == code4restDashboardParams.proChangelog || ( Array.isArray( code4restDashboardParams.proChangelog ) && ! code4restDashboardParams.proChangelog.length ) ) && (
						<Fragment>
							{ code4restDashboardParams.changelog.map( ( item, index ) => {
								return <ChangelogItem
									item={ item }
									index={ item }
								/>;
							} ) }
						</Fragment>
					) }
				</Fragment>
			) }
		</Fragment>
	);
};

export default withFilters( 'code4rest_theme_changelog' )( ChangelogTab );