import {ContextModalProps} from "@mantine/modals";
import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {UserSchema} from "../../../../client";
import {useForm} from "@mantine/form";
import {Checkbox, Fieldset, Input, Stack, Textarea, TextInput} from "@mantine/core";
import RoleSelect from "../../components/RoleSelect/RoleSelect.tsx";
import PositionSelect from "../../components/PositionSelect/PositionSelect.tsx";
import {UserRoleEnum} from "../../../../shared/enums/UserRole.ts";
import {capitalize} from "lodash";
import {IMaskInput} from "react-imask";
import phone from "phone";
import PayRateSelect from "../../../../components/Selects/PayRateSelect/PayRateSelect.tsx";

type Props = CreateEditFormProps<UserSchema>;
const UserFormModal = ({context, id, innerProps}: ContextModalProps<Props>) => {
    const isEditing = 'element' in innerProps;
    const initialValues = isEditing ? innerProps.element : {
        isAdmin: false,
        isBlocked: false,
        isDeleted: false,
        comment: "",
        roleKey: UserRoleEnum.USER
    };

    const form = useForm<Partial<UserSchema>>({
        initialValues: initialValues,
        validate: {
            firstName: value => !value?.trim() && "Укажите имя пользователя",
            secondName: value => !value?.trim() && "Укажите фамилию",
            position: (value, values) => ((values.role?.key === UserRoleEnum.EMPLOYEE) && (!value)) && 'Необходимо указать должность сотрудника',
            phoneNumber: value => !phone(value || '', {
                country: "",
                strictDetection: false,
                validateMobilePrefix: false
            }).isValid && 'Неверно указан номер телефона',
        }
    });
    return (<BaseFormModal
            form={form}
            closeOnSubmit
            onClose={() => context.closeContextModal(id)}
            {...innerProps}
        >
            <BaseFormModal.Body>
                <>
                    <Fieldset legend={"Общая информация"}>
                        <Stack>
                            <TextInput
                                label={"Имя"}
                                placeholder={"Введите имя пользователя"}
                                {...form.getInputProps("firstName")}
                                onChange={event => form.getInputProps('firstName').onChange(capitalize(event.target.value).trim())}

                            />
                            <TextInput
                                {...form.getInputProps("secondName")}
                                label={"Фамилия"}
                                placeholder={"Введите фамилию пользователя"}
                                onChange={event => form.getInputProps('secondName').onChange(capitalize(event.target.value).trim())}
                            />
                            <Input.Wrapper
                                label={"Номер телефона"}
                                error={form.getInputProps("phoneNumber").error}
                            >
                                <Input
                                    component={IMaskInput}
                                    mask="+7 000 000-00-00"
                                    placeholder={"Введите номер телефона"}
                                    {...form.getInputProps("phoneNumber")}
                                />
                            </Input.Wrapper>
                        </Stack>
                    </Fieldset>
                    <Fieldset legend={"Роль и должность"}>
                        <Stack>
                            <RoleSelect
                                label={"Роль пользователя"}
                                placeholder={"Выберите роль пользователя"}
                                {...form.getInputProps('role')}
                            />
                            {form.values.role?.key === UserRoleEnum.EMPLOYEE &&
                                <>
                                    <PositionSelect
                                        label={"Должность сотрудника"}
                                        placeholder={"Выберите должность сотрудника"}
                                        {...form.getInputProps('position')}
                                    />
                                    <PayRateSelect
                                        label={"Тариф"}
                                        placeholder={"Выберите тариф сотрудника"}
                                        {...form.getInputProps("payRate")}
                                    />
                                </>

                            }
                        </Stack>
                    </Fieldset>
                    <Fieldset legend={"Дополнительные параметры"}>
                        <Stack>
                            <Checkbox
                                label={"Права администратора"}

                                {...form.getInputProps('isAdmin', {type: "checkbox"})}
                            />
                            <Checkbox
                                label={"Заблокирован"}
                                {...form.getInputProps('isBlocked', {type: "checkbox"})}
                            />
                            <Textarea
                                label={"Дополнительная информация"}
                                {...form.getInputProps('comment')}
                            />
                        </Stack>
                    </Fieldset>
                </>
            </BaseFormModal.Body>
        </BaseFormModal>
    )
}

export default UserFormModal;