import slug from 'slug';

export type TableFullProps = TableIdentifierFullProps & TableHeaderFullProps & TableEmojiProps & TableTitleProps
export type TableLimitedProps = TableIdentifierLimitedProps & TableHeaderLimitedProps & TableEmojiProps & TableTitleProps
export type TableProps = TableFullProps|TableLimitedProps

export function reconstituteTable(element: HTMLElement, partial?: Partial<TableProps>): TableProps {
	return {
		...reconstituteTableHeader(element.dataset, partial),
		...reconstituteTableEmoji(element.querySelector(".tableEmoji")!, partial),
		...reconstituteTableTitle(element.querySelector(".tableTitle")!, partial),
	}
}

export interface TableIdentifierFullProps {
	identifier: string
	title: string
}

export interface TableIdentifierLimitedProps {
	identifier?: null
	title: string
}

export type TableIdentifierProps = TableIdentifierFullProps|TableIdentifierLimitedProps

export function tableIdentifier({ identifier, title }: TableIdentifierProps): string {
	if (typeof identifier === 'string') {
		return slug(identifier);
	} else {
		return slug(title);
	}
}

export interface TableHeaderFullProps {
	ordinal: number,
	id: number,
	name: string,
	identifier: string
}

export interface TableHeaderLimitedProps {
	ordinal: number,
	id?: null,
	name?: null,
	identifier?: null
}

export type TableHeaderProps = TableHeaderFullProps|TableHeaderLimitedProps

export function reconstituteTableHeader(dataset: DOMStringMap, partial?: Partial<TableHeaderProps>): TableHeaderProps {
	if ((partial?.id ?? null) !== null || "id" in dataset) {
		return {
			ordinal: partial?.ordinal ?? parseInt(dataset["ordinal"]!),
			id: partial?.id ?? parseInt(dataset["id"]!),
			name: partial?.name ?? dataset["name"]!,
			identifier: partial?.identifier ?? dataset["identifier"]!
		}
	} else {
		return {
			ordinal: partial?.ordinal ?? parseInt(dataset["ordinal"]!)
		}
	}
}

export function TableHeaderDataset({ ordinal, id, name, identifier }: TableHeaderProps): Record<`data-${string}`, string> {
	if (typeof identifier === "string") {
		return {
			"data-ordinal": `${ordinal}`,
			"data-id": `${id}`,
			"data-name": name,
			"data-identifier": identifier,
		}
	} else {
		return {
			"data-ordinal": `${ordinal}`,
		}
	}
}

export interface TableEmojiProps {
	emoji: string
}

export function reconstituteTableEmoji(element: HTMLSpanElement, partial?: Partial<TableEmojiProps>): TableEmojiProps {
	return {
		emoji: partial?.emoji ?? element.innerText
	}
}

export function TableEmoji({emoji}: TableEmojiProps) {
	return <span class="tableEmoji">{emoji}</span>
}

export interface TableTitleProps {
	title: string
}

export function reconstituteTableTitle(element: HTMLSpanElement, partial?: Partial<TableTitleProps>): TableTitleProps {
	return {
		title: partial?.title ?? element.innerText
	}
}

export function TableTitle({title}: TableTitleProps) {
	return <span class="tableTitle">{title}</span>
}

export interface TableNameProps {
	name: string
}

export function TableName({name}: TableNameProps) {
	return <span class="tableName">{name}</span>
}