import {
	Button,
	ButtonGroup,
	Form,
	OptionCard,
	OptionCardGroup,
	Page,
	PageBody,
	PageHeader,
	PageHeaderDescription,
	PageHeaderTitle,
	PageSection,
} from '@customerio/pluma-components/react';
import type { IconProps } from '@customerio/pluma-components/react';

export interface ChooseATypeOption {
	value: string;
	/** One to three words that name the type. */
	title: string;
	/** One short sentence on what sets this type apart. */
	description: string;
	icon: IconProps['name'];
}

export interface ChooseATypeProps {
	/** The types to choose from, in the order they are shown. */
	types: ChooseATypeOption[];
	/** The value of the chosen type. Start with the most common type chosen, so the step never opens empty. */
	selectedType: string;
	/** Called with the value of the type the user picks. */
	onTypeChange: (type: string) => void;
	/** Called when the user continues with the chosen type. Return a promise to lock the form until it settles. */
	onContinue: () => void | Promise<void>;
	/** Called when the user leaves the flow without creating anything. */
	onCancel: () => void;
}

export function ChooseAType({ types, selectedType, onTypeChange, onContinue, onCancel }: ChooseATypeProps) {
	return (
		<Page isFullScreen bodyContentWidth="narrow">
			<PageHeader>
				<PageHeaderTitle>Create campaign</PageHeaderTitle>
				<PageHeaderDescription>
					Choose what starts this campaign. You set up its trigger and messages next.
				</PageHeaderDescription>
			</PageHeader>
			<PageBody>
				<Form onSubmit={onContinue}>
					<PageSection divider="contained">
						<OptionCardGroup
							label="Campaign type"
							value={selectedType}
							onChange={onTypeChange}
							cardsDirection="column"
							cardsGap="100"
						>
							{types.map((type) => (
								<OptionCard
									key={type.value}
									value={type.value}
									title={type.title}
									description={type.description}
									icon={type.icon}
								/>
							))}
						</OptionCardGroup>
					</PageSection>
					<PageSection>
						<ButtonGroup groupVariant="spaced" display="flex">
							<Button variant="tertiary" mr="auto" onClick={onCancel}>
								Cancel
							</Button>
							<Button variant="primary" type="submit">
								Continue
							</Button>
						</ButtonGroup>
					</PageSection>
				</Form>
			</PageBody>
		</Page>
	);
}

pluma-cli scaffold choose-a-type <dest-dir> --framework react