import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.css';

interface DetailArticle {
    title: string;
    slug: string;
    description: string;
    post_date: Date;
    status: string;
}

interface DetailArticleProps {
    detailArticle: DetailArticle;
    setDetailArticle: React.Dispatch<React.SetStateAction<DetailArticle>>;
}
const DetailForm: React.FC<DetailArticleProps> = ({ detailArticle, setDetailArticle }) => {
    const handleChange = (e: any) => {
        setDetailArticle((prev) => ({
            ...prev,
            [e.target.name]: e.target.value,
        }));
    };
    return (
        <div className="mt-6 w-full xl:mt-0 xl:w-96">
            <div className="panel  mb-5">
                <div className="text-lg">Detail Article : </div>

                <div className="mb-2 mt-4 items-center">
                    <label htmlFor="articleTitle" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Title
                    </label>
                    <input type="text" id="articleTitle" name="title" value={detailArticle.title} onChange={handleChange} className="form-input my-2" />
                </div>
                <div className="mb-2 mt-4 items-center">
                    <label htmlFor="articleUrl" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Url / Slug
                    </label>
                    <input type="text" id="articleUrl" name="slug" value={detailArticle.slug} onChange={handleChange} className="form-input my-2" />
                </div>
                <div className="mb-2 mt-4 items-center">
                    <label htmlFor="articleDescription" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Meta Description
                    </label>
                    <textarea id="articleDescription" name="description" value={detailArticle.description} onChange={handleChange} className="form-input my-2"></textarea>
                </div>
                <div className="mb-2 mt-4 items-center">
                    <label htmlFor="postDate" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Post Date
                    </label>
                    <Flatpickr
                        options={{
                            dateFormat: 'Y-m-d',
                            position: 'auto left',
                            time_24hr: true,
                        }}
                        value={detailArticle.post_date}
                        className="form-input my-2"
                        placeholder="yyyy-mm-dd"
                        onChange={(postDate) =>
                            setDetailArticle((prev: any) => {
                                if (postDate) {
                                    return {
                                        ...prev,
                                        post_date: postDate,
                                    };
                                }
                            })
                        }
                    />
                </div>
                <div className="mb-2 mt-4 items-center">
                    <label htmlFor="articleStatus" className="mb-0 flex-1 ltr:mr-2 rtl:ml-2">
                        Status
                    </label>
                    <select name="status" id="articleStatus" value={detailArticle.status} onChange={handleChange} className="form-input my-2">
                        <option value="draft">draft</option>
                        <option value="publish">publish</option>
                    </select>
                </div>
            </div>
        </div>
    );
};
export default DetailForm;