import InputLabel from "../common/InputLabel";
import TextInput from "../common/TextInput";
import {FormControl, MenuItem, Select} from "@mui/material";
import Checkbox from "../common/Checkbox";
import AdminApi from "../../api/AdminApi";
import React, {useState} from "react";
import LoadingTemplate from "../common/LoadingTemplate";
import InputError from "../common/InputError";

export default function AddProperty({callback, categoryId}) {

    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(false)
    const [data, setData] = useState({
        title: '',
        slug: '',
        main: 0,
        isVariable: 0,
        type: 'default',
        validation_rules: "{}"
    })
    const handlePostProperty = async () => {
        setLoading(true)
        const PostPropertyRes = await AdminApi.post(`properties/store/${categoryId}`, data)
        if (PostPropertyRes === undefined) {
            setError(true)
        } else {
            await callback()
            setError(false)
        }
        setLoading(false)
    }

    const handleChange = (name, value) => {
        setData({
            ...data,
            [name]: value
        })
    }
    return (
        <div className={'flex flex-col'}>
            <div className={'flex flex-row items-center justify-center'}>
                <div className={'flex flex-col w-50'}>
                    <InputLabel className={"justify-start font-[Vazirmatn] font-normal mt-3 mb-2 mr-2"} htmlFor={'property-title'}>
                        <div className={'flex flex-row items-center justify-center'}>
                            نام
                        </div>
                    </InputLabel>
                    <TextInput
                        id="property-title"
                        type="text"
                        name="title"
                        value={data.title}
                        className="py-3 ml-1 w-full font-[Vazirmatn] flex text-right border-gray-500 placeholder:text-sm placeholder-gray-400 "
                        placeholder={'مثال: وزن'}
                        onChange={(e) => {handleChange(e.target.name, e.target.value)}}
                    />
                </div>
                <div className={"flex flex-col w-50"}>
                    <InputLabel className={"justify-start font-[Vazirmatn] font-normal mt-3 mb-2 mr-2"} htmlFor={'property-title'}>
                        <div className={'flex flex-row items-center justify-center'}>
                            اسلاگ
                        </div>
                    </InputLabel>
                    <TextInput
                        id="property-slug"
                        type="text"
                        name="slug"
                        value={data.slug}
                        className="py-3 mr-1 w-full font-[Vazirmatn] flex text-right border-gray-500 placeholder:text-sm placeholder-gray-400 "
                        placeholder={'مثال: weight'}
                        onChange={(e) => {handleChange(e.target.name, e.target.value)}}
                    />
                </div>
            </div>
            <div className={'flex flex-col items-start justify-center my-3'}>
                <div className={'flex flex-row items-center justify-center'}>
                    <FormControl className={"w-40"}>
                        <Select
                            name={'type'}
                            defaultValue={'default'}
                            sx={{height: '2.6rem', borderRadius: '8px', fontFamily: 'Vazirmatn', color: '#1e1e1e'}}
                            value={data.type}
                            onChange={(e) => {handleChange(e.target.name, e.target.value)}}
                        >
                            <option value={'default'} disabled hidden>نوع</option>
                            <MenuItem
                                invalid={true}
                                divider={true}
                                sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}}
                                value={'integer'}
                            >
                                عددی
                            </MenuItem>
                            <MenuItem
                                divider={true}
                                sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}}
                                value={'string'}
                            >
                                متنی
                            </MenuItem>
                            <MenuItem
                                divider={true}
                                sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}}
                                value={'date'}
                            >
                                تاریخ
                            </MenuItem>
                            <MenuItem
                                divider={true}
                                sx={{fontFamily: 'Vazirmatn', color: '#1e1e1e', display: 'flex', justifyContent: 'end'}}
                                value={'list'}
                            >
                                لیست
                            </MenuItem>
                        </Select>
                    </FormControl>
                    <label className="flex items-center">
                        <span className="mx-2 text-sm font-[Vazirmatn]">ویژگی اصلی</span>
                        <Checkbox
                            onChange={(e) => {handleChange(e.target.name, Number(e.target.checked))}}
                            name="main"
                        />
                    </label>
                    <label className="flex items-center">
                        <span className="mx-2 text-sm font-[Vazirmatn]">چند مقدار</span>
                        <Checkbox
                            onChange={(e) => {handleChange(e.target.name, Number(e.target.checked))}}
                            name="isVariable"
                        />
                    </label>
                </div>
                {
                    error ?
                        <InputError message={'خطا! لطفا فیلد هارا به درستی پر کنید و دوباره تلاش کنید. در غیر این صورت با پشتیبانی تماس بفرمایید'} className="mt-3 mx-3 font-[dana]" />
                        : null
                }
                <LoadingTemplate loading={loading} marginLeft={'-22px'}>
                    <button
                        disabled={loading}
                        className={'font-[Vazirmatn] bg-zinc-900 text-white rounded-lg  mb-5 mt-4 py-2 text-center w-full hover:bg-zinc-700'}
                        onClick={handlePostProperty}>
                        ثبت ویژگی
                    </button>
                </LoadingTemplate>

            </div>
        </div>
    )
}