import React from 'react';
import { Modal } from 'src/components';
import { appAccessList } from './consts';
import { UserModalProps } from './types';

export const UserModal = ({ open, onClose, onSave = () => {} }: UserModalProps) => {
  return (
    <Modal onClose={onClose} open={open} onSave={onSave} useCancelButton>
      <div className="bg-white px-4">
        <div className="space-y-4 divide-y divide-gray-200">
          <div>
            <div>
              <h3 className="text-lg leading-6 font-medium text-gray-900">Personal Information</h3>
            </div>

            <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
              <div className="sm:col-span-3">
                <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                  Name
                </label>
                <div className="mt-1">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    autoComplete="given-name"
                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>

              <div className="sm:col-span-3">
                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                  Email
                </label>
                <div className="mt-1">
                  <input
                    type="email"
                    name="email"
                    id="email"
                    autoComplete="family-name"
                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  />
                </div>
              </div>

              <div className="sm:col-span-3">
                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
                  Status
                </label>
                <div className="mt-1">
                  <select
                    id="status"
                    name="status"
                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  >
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Banned</option>
                  </select>
                </div>
              </div>

              <div className="sm:col-span-3">
                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
                  Role
                </label>
                <div className="mt-1">
                  <select
                    id="status"
                    name="status"
                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                  >
                    <option>User</option>
                    <option>Admin</option>
                    <option>Super Admin</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div className="mt-4">
              <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
            </div>

            <div>
              <div className="flow-root mt-6">
                <ul className="-my-5 divide-y divide-gray-200 ">
                  {appAccessList.map((app: any) => {
                    return (
                      <li className="py-4" key={app.name}>
                        <div className="flex items-center space-x-4">
                          <div className="flex-shrink-0 flex-1 flex items-center">
                            <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
                            <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
                          </div>
                          <div>
                            <select
                              id={app.name}
                              name={app.name}
                              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                            >
                              <option>User</option>
                              <option>Admin</option>
                              <option>Super Admin</option>
                            </select>
                          </div>
                        </div>
                      </li>
                    );
                  })}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};