/**
 * Template gallery: the tour-creation entry point.
 */
import { __ } from '@wordpress/i18n';
import { Typography, Card, Row, Col, Button, Tag } from 'antd';
import { PlusOutlined, LockOutlined, RightOutlined } from '@ant-design/icons';

import { config } from '../../api';
import { navigate } from '../../App';

const start = ( template ) => {
	window.sessionStorage.setItem(
		'vist360_template',
		JSON.stringify( template )
	);
	navigate( 'new' );
};

const TemplateGallery = () => (
	<div className="vist360-view">
		<div className="vist360-view__header">
			<div>
				<Typography.Title level={ 2 }>
					{ __(
						'Start a new tour',
						'vistour-virtual-tour-builder'
					) }
				</Typography.Title>
				<Typography.Text type="secondary">
					{ __(
						'Pick a starting point — you can change everything later.',
						'vistour-virtual-tour-builder'
					) }
				</Typography.Text>
			</div>
		</div>

		<Row gutter={ [ 20, 20 ] }>
			{ config.templates.map( ( template ) => (
				<Col
					key={ template.id }
					xs={ 24 }
					sm={ 12 }
					lg={ 8 }
					xl={ 6 }
					xxl={ 4 }
				>
					<Card
						hoverable
						className="vist360-template-card"
						onClick={ () => start( template ) }
						cover={
							<div
								className={ `vist360-template-card__cover is-${ template.id }` }
							>
								{ 'blank' === template.id ? (
									<PlusOutlined />
								) : (
									<span className="vist360-template-card__initial">
										{ template.name.charAt( 0 ) }
									</span>
								) }
							</div>
						}
					>
						<Card.Meta
							title={ template.name }
							description={ template.description }
						/>
						<Button
							type="link"
							className="vist360-template-card__cta"
							icon={ <RightOutlined /> }
							iconPosition="end"
						>
							{ __(
								'Start',
								'vistour-virtual-tour-builder'
							) }
						</Button>
					</Card>
				</Col>
			) ) }

			{ config.lockedTemplates.map( ( name ) => (
				<Col
					key={ name }
					xs={ 24 }
					sm={ 12 }
					lg={ 8 }
					xl={ 6 }
					xxl={ 4 }
				>
					<Card className="vist360-template-card is-locked">
						<div className="vist360-template-card__cover is-locked-cover">
							<LockOutlined />
						</div>
						<Card.Meta
							title={
								<>
									{ name }{ ' ' }
									<Tag color="gold">
										{ __(
											'PRO',
											'vistour-virtual-tour-builder'
										) }
									</Tag>
								</>
							}
							description={ __(
								'Available in the Pro version.',
								'vistour-virtual-tour-builder'
							) }
						/>
					</Card>
				</Col>
			) ) }
		</Row>
	</div>
);

export default TemplateGallery;
