'use client';

import Button from '@mui/material/Button';
import Chip from '@mui/material/Chip';
import Typography from '@mui/material/Typography';
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
import DirectionsRoundedIcon from '@mui/icons-material/DirectionsRounded';
import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
import LocationOnRoundedIcon from '@mui/icons-material/LocationOnRounded';
import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
import PhoneRoundedIcon from '@mui/icons-material/PhoneRounded';
import { renderStoreRichText } from '@/lib/storeRichText';
import type { StoreConfig, StoreContentPage } from '../../config/defaultStoreConfig';
import {
	ContactBody,
	ContactBreadcrumb,
	ContactCopy,
	ContactFormGrid,
	ContactFormPanel,
	ContactInfoLine,
	ContactMapCard,
	ContactMapFrame,
	ContactPageView,
	ContactRequired,
	ContactStoreInfo,
	ContactSubmit,
	ContactTitle,
	ContentPageView,
	ProductDetailTop,
	ContentHero,
	ContentBlocks,
	ContentBlock,
	SectionTitle,
	RichDescription
} from '../styles';

interface Props {
	page: StoreContentPage;
	config: StoreConfig;
	onClose: () => void;
}

export default function ContentPageSection({ page, config, onClose }: Props) {
	const contact = config.footer.contact;
	const contactMap = contact.map;

	if (page.key === 'contacto') {
		return (
			<ContactPageView>
				<ContactBreadcrumb aria-label="Ruta de navegacion">
					<button
						type="button"
						onClick={onClose}
					>
						<HomeRoundedIcon />
					</button>
					<ChevronRightRoundedIcon />
					<span>Página</span>
					<ChevronRightRoundedIcon />
					<strong>Contacto</strong>
				</ContactBreadcrumb>

				<ContactTitle>Contacto</ContactTitle>

				<ContactMapFrame>
					{contactMap?.embedUrl && (
						<iframe
							title={`Mapa de ${contactMap.title}`}
							src={contactMap.embedUrl}
							loading="lazy"
							referrerPolicy="no-referrer-when-downgrade"
						/>
					)}
					{contactMap && (
						<ContactMapCard>
							<div>
								<strong>{contactMap.title}</strong>
								<span>{contactMap.subtitle}</span>
							</div>
							<a
								href={contactMap.directionsUrl}
								target="_blank"
								rel="noreferrer"
								aria-label="Abrir mapa"
							>
								<OpenInNewRoundedIcon fontSize="small" />
							</a>
							<a
								href={contactMap.directionsUrl}
								target="_blank"
								rel="noreferrer"
								aria-label="Como llegar"
							>
								<DirectionsRoundedIcon fontSize="small" />
							</a>
						</ContactMapCard>
					)}
				</ContactMapFrame>

				<ContactBody>
					<ContactStoreInfo>
						<h2>Tu tienda</h2>
						<ContactInfoLine href={contactMap?.directionsUrl ?? '#mapa'}>
							<LocationOnRoundedIcon />
							<span>{contact.address}</span>
						</ContactInfoLine>
						<ContactInfoLine href={`tel:${contact.phone.replace(/\s/g, '')}`}>
							<PhoneRoundedIcon />
							<span>Telefono: {contact.phone}</span>
						</ContactInfoLine>
						<ContactCopy>{contact.description ?? page.blocks[0]?.content}</ContactCopy>
						<ContactCopy>{contact.hours}</ContactCopy>
					</ContactStoreInfo>

					<ContactFormPanel
						onSubmit={(event) => {
							event.preventDefault();
						}}
					>
						<h2>Formulario de contacto</h2>
						<ContactFormGrid>
							<label htmlFor="contact-name">
								<ContactRequired>*</ContactRequired> Nombre
							</label>
							<input
								id="contact-name"
								name="name"
								type="text"
								autoComplete="name"
							/>

							<label htmlFor="contact-email">
								<ContactRequired>*</ContactRequired> Email
							</label>
							<input
								id="contact-email"
								name="email"
								type="email"
								autoComplete="email"
							/>

							<label htmlFor="contact-message">
								<ContactRequired>*</ContactRequired> Consulta
							</label>
							<textarea
								id="contact-message"
								name="message"
							/>
						</ContactFormGrid>
						<ContactSubmit type="submit">Enviar</ContactSubmit>
					</ContactFormPanel>
				</ContactBody>
			</ContactPageView>
		);
	}

	return (
		<ContentPageView>
			<ProductDetailTop>
				<Button
					variant="outlined"
					size="small"
					onClick={onClose}
				>
					Volver al catálogo
				</Button>
				<span>Contenido editable desde el panel Ecommerce</span>
			</ProductDetailTop>
			<ContentHero>
				<Chip
					label="Información"
					size="small"
					sx={{ background: 'var(--store-primary)', color: '#fff' }}
				/>
				<Typography
					component="h1"
					variant="h3"
				>
					{page.title}
				</Typography>
				{page.subtitle && <p>{page.subtitle}</p>}
			</ContentHero>
			<ContentBlocks>
				{page.blocks.map((block, index) => (
					<ContentBlock key={`${block.title ?? 'bloque'}-${index}`}>
						{block.title && <SectionTitle>{block.title}</SectionTitle>}
						<RichDescription>{renderStoreRichText(block.content)}</RichDescription>
					</ContentBlock>
				))}
			</ContentBlocks>
		</ContentPageView>
	);
}