<script>
	import Dialog from "../ui/Dialog.svelte";
	import TableCudButtons from "../shorts/TableCUDButtons.svelte";
	import Button from "../ui/Button.svelte";
	import Table from "../table/Table.svelte";
	import Field from "../form/Field.svelte";
	import TextInput from "../form/TextInput.svelte";
	import Search from "../ui/Search.svelte";

	/**
	 * @typedef {Object} Props
	 * @property {boolean} [is_item_dialog_open]
	 * @property {boolean} [is_dialog_item_add]
	 * @property {string} [cur_dialog_name]
	 * @property {any} current_table
	 * @property {any} current_item
	 * @property {any} query
	 * @property {any} db
	 * @property {any} [toggle_add_dialog]
	 * @property {any} [open_item_edit]
	 * @property {any} [sql_insert_short]
	 * @property {any} [sql_update_short]
	 * @property {any} [sql_delete_short]
	 * @property {string} [second_col_name]
	 * @property {any} [columns]
	 * @property {any} [columns_display]
	 * @property {boolean} [is_searching] - export let is_searching = false;
	 * @property {import('svelte').Snippet} [second_value_input]
	 */

	/** @type {Props} */
	let {
		is_item_dialog_open = $bindable(false),
		is_dialog_item_add = $bindable(false),
		cur_dialog_name = "__example__",
		current_table,
		current_item = $bindable(),
		query,
		db,
		toggle_add_dialog = () => {},
		open_item_edit = (/** @type {any} */ item) => {},
		sql_insert_short = async (
		/** @type {any} */ arg1,
		/** @type {any} */ arg2,
	) => {},
		sql_update_short = async (
		/** @type {any} */ arg1,
		/** @type {any} */ arg2,
	) => {},
		sql_delete_short = () => {},
		second_col_name = "name",
		columns = ["id", "name"],
		columns_display = columns,
		is_searching = $bindable(false),
		second_value_input
	} = $props();

	let search_query_result = $state("");
</script>

<Dialog
	bind:is_open={is_item_dialog_open}
	on_close={() => {
		is_dialog_item_add = false;
	}}
	name={cur_dialog_name}>
	{#snippet children({ form })}
		{#if !is_dialog_item_add}
			<h1>{columns_display[0]} {current_item.id}</h1>
		{/if}

		<Field name={columns_display[1]}>
			{#if second_value_input}{@render second_value_input()}{:else}
				<TextInput bind:value={current_item[second_col_name]}></TextInput>
			{/if}
		</Field>

		<TableCudButtons {form} bind:is_dialog_item_add
			on_add={async () => {
				await sql_insert_short(current_table, [second_col_name]);
			}}
			on_save={async () => {
				await sql_update_short(current_table, [second_col_name]);
			}}
			on_delete={sql_delete_short}
		></TableCudButtons>
	{/snippet}
</Dialog>

<div class="m-2 flex space-x-2">
	<Button
		is_visible={!is_searching}
		on_click={() => {
			current_item = {id: 0};
			current_item[second_col_name] = "";
			toggle_add_dialog();
		}}>
		Добавить
	</Button>

	<Search
		bind:is_searching
		bind:current_item
		bind:search_query_result
		{columns}
		{current_table}
	></Search>
	<!-- <Button -->
	<!--   on_click={async () => { -->
	<!--     await export_csv(data); -->
	<!--   }} -->
	<!-- > -->
	<!--   CSV -->
	<!-- </Button> -->
</div>

<Table
	bind:is_searching
	search_query={db.select(search_query_result)}
	{open_item_edit}
	{query}
	{columns}
	{columns_display}
></Table>
