import { UserService } from '@/services/userService';
import { useUserSelector } from '@/store/userStore';
import { User } from '@/types/user';
import { Button, Form, Input, Select } from 'antd';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

const { Option } = Select;

interface UserEditProps {
  userId?: number;
}

export default function UserEdit({ userId }: UserEditProps) {
  const currentUser = useUserSelector();
  const [form] = Form.useForm();
  const { t } = useTranslation();
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    async function getUser() {
      if (typeof userId === 'undefined') {
        return;
      }
      const user = await UserService.getUserById(userId);
      setUser(user);
      form.setFieldsValue({ ...user });
    }

    getUser();
  }, []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <Form
        form={form}
        name="user-edit-form"
        layout="vertical"
        // onFinish={onFinish}
        initialValues={{ ...user }}
        style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
      >
        <Form.Item
          label={t('name')}
          name="name"
          rules={[{ message: t('nameMessage') }]}
        >
          <Input />
        </Form.Item>

        {user?.id === currentUser?.id ? undefined : (
          <Form.Item
            label={t('login')}
            name="login"
            rules={[{ message: t('loginMessage') }]}
          >
            <Input />
          </Form.Item>
        )}

        <Form.Item
          label={t('password')}
          name="password"
          rules={[{ message: t('passwordMessage') }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label={t('email')}
          name="email"
          rules={[
            { required: true, message: t('emailMessage') },
            { type: 'email', message: t('emailErrorMessage') },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label={t('tenant')}
          name="bindTenantId"
          rules={[{ required: true, message: t('tenantMessage') }]}
        >
          <Input />
        </Form.Item>

        {user?.id === currentUser?.id ? undefined : (
          <Form.Item
            label={t('role')}
            name="role"
            rules={[{ required: true, message: t('roleMessage') }]}
          >
            <Select placeholder={t('roleMessage')}>
              {currentUser && currentUser.role === 'OWNER' ? (
                <Option value="ADMIN">{t('ADMIN')}</Option>
              ) : undefined}
              <Option value="EDITOR">{t('EDITOR')}</Option>
              <Option value="VIEWER">{t('VIEWER')}</Option>
            </Select>
          </Form.Item>
        )}

        <Form.Item
          label={t('status')}
          name="status"
          rules={[{ required: true, message: t('statusMessage') }]}
        >
          <Select placeholder={t('statusMessage')}>
            <Option value="ACTIVE">{t('ACTIVE')}</Option>
            <Option value="DISABLED">{t('DISABLED')}</Option>
            <Option value="BLOCKED">{t('BLOCKED')}</Option>
            <Option value="DELETED">{t('DELETED')}</Option>
          </Select>
        </Form.Item>

        <div style={{ flexGrow: 1 }} />

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            block
            style={{ color: '#000' }}
          >
            <img
              src="/icons/drawer/save.svg"
              alt="save"
              style={{ height: '18px', width: '18px' }}
            />{' '}
            {t('save')}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}