import React from 'react';
import { 
  FormSidebar, 
  FormField
} from '@skybridge/web-components';
import { userService } from '../services/userService';
import { User } from '../types/user';

interface UserSidebarProps {
  opened: boolean;
  onClose: () => void;
  onSuccess: () => void;
  editUser?: User | null;
}

const UserSidebar: React.FC<UserSidebarProps> = ({
  opened,
  onClose,
  onSuccess,
  editUser,
}) => {
  const fields: FormField[] = [
    {
      name: 'first_name',
      label: 'First Name',
      type: 'text',
      required: true,
      placeholder: 'Enter first name',
    },
    {
      name: 'last_name',
      label: 'Last Name', 
      type: 'text',
      required: true,
      placeholder: 'Enter last name',
    },
    {
      name: 'display_name',
      label: 'Display Name',
      type: 'text',
      required: false,
      placeholder: 'Enter display name (optional)',
    },
    {
      name: 'email',
      label: 'Email',
      type: 'email',
      required: true,
      placeholder: 'Enter email address',
      validation: { email: true },
    },
    {
      name: 'avatar',
      label: 'Avatar URL',
      type: 'text',
      required: false,
      placeholder: 'Enter avatar URL (optional)',
    },
    {
      name: 'role',
      label: 'Role',
      type: 'select',
      required: true,
      options: [
        { value: 'admin', label: 'Admin' },
        { value: 'moderator', label: 'Moderator' },
        { value: 'user', label: 'User' },
        { value: 'viewer', label: 'Viewer' },
      ],
      defaultValue: 'user',
    },
    {
      name: 'status',
      label: 'Status',
      type: 'select', 
      required: true,
      options: [
        { value: 'active', label: 'Active' },
        { value: 'inactive', label: 'Inactive' },
        { value: 'suspended', label: 'Suspended' },
        { value: 'pending', label: 'Pending' },
      ],
      defaultValue: 'pending',
    },
  ];

  const handleSubmit = async (values: any) => {
    if (editUser) {
      await userService.updateUser(editUser.id, values);
    } else {
      await userService.createUser(values);
    }
  };

  return (
    <FormSidebar
      opened={opened}
      onClose={onClose}
      onSuccess={onSuccess}
      title="User"
      editMode={!!editUser}
      editItem={editUser}
      fields={fields}
      onSubmit={handleSubmit}
      width={400}
    />
  );
};

export default UserSidebar;