import { type FC } from 'react'
import { type FormikProps } from 'formik'
import Input from '../../../components/Input'
import Select from '../../../components/Select'
import Textarea from '../../../components/Textarea'
import { type BlogFormType } from '../types/Types'
import { TagManager } from './TagManager'

interface BlogFormFieldsProps {
    formik: FormikProps<BlogFormType>
    categoryOptions: { value: string; label: string }[]
}

export const BlogFormFields: FC<BlogFormFieldsProps> = ({ formik, categoryOptions }) => {
    const getFieldError = (field: keyof BlogFormType) => {
        const error = formik.touched[field] && formik.errors[field]
        return error ? (Array.isArray(error) ? error[0] : error) : ''
    }

    return (
        <div className='space-y-6'>
            <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
                <Input
                    label='عنوان فارسی بلاگ'
                    placeholder='مثال: راهنمای خرید گوشی'
                    {...formik.getFieldProps('title_fa')}
                    error_text={getFieldError('title_fa')}
                />
                <Input
                    label='اسلاگ بلاگ'
                    placeholder='مثال: rahnamad-kharid-goshi'
                    {...formik.getFieldProps('slug')}
                    error_text={getFieldError('slug')}
                />
            </div>

            <Select
                label='دسته‌بندی'
                placeholder='انتخاب دسته‌بندی بلاگ'
                items={categoryOptions}
                {...formik.getFieldProps('category')}
                error_text={getFieldError('category')}
            />

            <Textarea
                label='توضیحات بلاگ'
                placeholder='توضیحات کوتاه بلاگ را وارد کنید...'
                {...formik.getFieldProps('description')}
                error_text={getFieldError('description')}
            />

            <Textarea
                label='محتوای بلاگ'
                placeholder='محتوای کامل بلاگ را وارد کنید...'
                rows={10}
                {...formik.getFieldProps('content')}
                error_text={getFieldError('content')}
            />

            <TagManager
                tags={formik.values.tags}
                onTagsChange={(tags) => formik.setFieldValue('tags', tags)}
            />
        </div>
    )
}
