'use client'

import { useTranslations } from 'next-intl'
import { useEffect } from 'react'

import { useGetColumnsFromFileMutation } from '@/graphql'

import { BsToggles } from 'react-icons/bs'
import { TbCalendar, TbLetterCase } from 'react-icons/tb'

import { NumberTypeIcon } from '@/components/atoms/icons'

import { Select, Spin, Table, Typography } from '@/components/atoms'

import { useCreateDataset } from '@/hooks'

const { Title, Text } = Typography

function Step3() {
	const tg = useTranslations()
	const t = useTranslations('datasets.creation.steps.three')
	//
	const { datasetFileInfo, setColumns } = useCreateDataset()
	//
	const [getColumnsFromFile, { data, loading }] =
		useGetColumnsFromFileMutation({
			onCompleted(data) {
				setColumns(data.getColumnsFromFile)
			}
		})
	//
	useEffect(() => {
		if (datasetFileInfo.path) {
			getColumnsFromFile({
				variables: {
					data: datasetFileInfo
				}
			})
		}
	}, [datasetFileInfo.path])
	// const handleUpload = (files: Partial<FileModel>[]) => {

	// }
	//
	const typeChangeHandler = (path: string, value: any) => {
		setColumns(prev => {
			const changeColumn = prev.find((col: any) => col.path === path)
			//
			// if (changeColumn) changeColumn.type = value
			//
			return prev
		})
	}
	//
	const onRowSelectionHandler = (ids: string[]) => {
		// @ts-ignore
		setColumns(prev => {
			// // Проверяем, действительно ли нужно обновление
			// const currentIds = prev.map(col => col.path).sort()
			// const newIds = (ids as string[]).sort()

			// if (
			// 	currentIds.length === newIds.length &&
			// 	currentIds.every((id, i) => id === newIds[i])
			// ) {
			// 	return prev // Возвращаем тот же массив, если нет изменений
			// }

			return data?.getColumnsFromFile
				.filter(i => ids.includes(i.path))
				.map(i => ({
					name: i.name,
					path: i.path,
					type: i.type
				}))
		})
	}
	//
	const getTableData = (data: any) => {
		return data
			? data.getColumnsFromFile.map((dataItem: any) => {
					return {
						id: dataItem.path,
						name: <Text>{dataItem.name}</Text>,
						type: (
							<Select
								defaultValue={dataItem.type}
								onValueChange={(value: any) =>
									typeChangeHandler(dataItem.path, value)
								}
								className='w-34'
							>
								<Select.Item
									value={
										dataItem.type === 'DECIMAL'
											? 'DECIMAL'
											: 'BIGINT'
									}
								>
									<NumberTypeIcon /> {tg('typeof.number')}
								</Select.Item>
								<Select.Item value='TEXT'>
									<TbLetterCase /> {tg('typeof.string')}
								</Select.Item>
								<Select.Item value='TIMESTAMP'>
									<TbCalendar /> {tg('typeof.date')}
								</Select.Item>
								<Select.Item value='BOOLEAN'>
									<BsToggles /> {tg('typeof.boolean')}
								</Select.Item>
							</Select>
						)
					}
				})
			: []
	}

	return (
		<div className='flex flex-col gap-y-4'>
			{loading ? (
				<Spin />
			) : (
				<Table
					inModal
					isAllChecked
					dataSource={getTableData(data)}
					columns={[
						{
							key: 'name',
							title: t('columns.name')
						},
						{
							key: 'type',
							title: t('columns.type')
						}
					]}
					onRowSelection={onRowSelectionHandler}
					className='mb-4 max-h-95 overflow-y-auto'
				/>
			)}
		</div>
	)
}

export { Step3 }
