import { Fragment } from 'react';
import dynamic from 'next/dynamic';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import * as Icon from 'react-feather';
import { formatDate, convertTimezone } from 'helpers/date';

const MembersCountDropdown = dynamic(() =>
  import('../elements/MembersCountDropdown')
);
const ActionDropdown = dynamic(() => import('../elements/ActionDropdown'));
const Loader = dynamic(() => import('../elements/Loader'));

const List = ({
  roleData,
  setRoleData,
  teamData,
  actionDropdownData = [],
  handleRoleMemberDisplay,
  handleRoleMemberEdit,
  handleRoleOrdering,
  loading,
}) => {
  const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  };

  const handleOnDragEnd = async (result) => {
    if (!result.destination) {
      return;
    }

    if (!result.destination.index || result.destination.index === roleData.length - 1) {
      return
    }

    const items = reorder(
      roleData,
      result.source.index,
      result.destination.index
    );

    setRoleData(items);

    await handleRoleOrdering(items)
  };

  return (
    <DragDropContext onDragEnd={handleOnDragEnd}>
      <div className='relative w-full bg-white rounded px-6 py-4'>
        <div className='w-full overflow-auto scroll-smooth scrollbar'>
          {roleData.length > 0 && (
            <table className='w-full'>
              <thead>
                <tr className='text-left font-semibold text-base text-neutral-40 border-b border-neutral-20/30'>
                  <th className='px-0 py-4'>
                    <div className='flex items-center pr-4 relative'>
                      SL. No.
                    </div>
                  </th>
                  <th className='px-0 py-4'>
                    <div className='flex items-center pr-4 relative'>Role</div>
                  </th>
                  <th className='px-0 py-4'>
                    <div className='flex justify-center mt-6'>Members</div>
                  </th>
                  <th className='px-0 py-4'>
                    <div className='flex  items-center mt-6'>View Members</div>
                  </th>
                  <th className='px-0 py-4'>
                    <div className='flex  items-center mt-6'>Created Date</div>
                  </th>

                  <th className='text-right px-0 py-4 '>Action</th>
                </tr>
              </thead>

              <Droppable droppableId='droppable'>
                {(provided, snapshot) => (
                  <tbody
                    className='divide-y text-slate-100 text-sm font-semibold'
                    {...provided.droppableProps}
                    ref={provided.innerRef}
                  >
                    {loading && !roleData.length && (
                      <tr>
                        <td className='py-20' colSpan={20}>
                          <Loader />
                        </td>
                      </tr>
                    )}
                    {roleData.map((item, index) => {
                      let selectedMembers = [];

                      item.members.forEach((member) => {
                        if (member._id) {
                          selectedMembers.push(member._id);
                        }
                      });

                      return (
                        <Fragment key={item._id}>
                          <Draggable
                            draggableId={item._id}
                            key={item._id}
                            index={index}
                            isDragDisabled={
                              item.is_invited_member || item.is_super_admin
                                ? true
                                : false
                            }
                          >
                            {(provided, snapshot) => (
                              <tr
                                ref={provided.innerRef}
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                              >
                                <td className='px-0 py-6'>{index + 1}</td>
                                <td className='px-0 py-6'>{item.name}</td>
                                <td className='px-0 py-6'>
                                  {!item.is_invited_member ? (
                                    <div className='flex justify-center'>
                                      <MembersCountDropdown
                                        dropdownData={item.members}
                                        allUsers={teamData}
                                        selectedUsers={selectedMembers}
                                        onUserChange={(e) =>
                                          handleRoleMemberEdit(item, e)
                                        }
                                      />
                                    </div>
                                  ) : (
                                    <div className='flex justify-center pointer-events-none'>
                                      <button className='bg-slate-40 w-8 h-8 rounded-full flex items-center justify-center'>
                                        <Icon.UserPlus
                                          className='text-white'
                                          size={18}
                                        />
                                      </button>
                                    </div>
                                  )}
                                </td>
                                <td
                                  className='px-0 py-6 flex'
                                  onClick={() =>
                                    handleRoleMemberDisplay(item._id)
                                  }
                                >
                                  {item.members.length > 0 && (
                                    <>
                                      {item.members.length}
                                      <div className='ml-5 cursor-pointer'>
                                        <Icon.ChevronDown />
                                      </div>
                                    </>
                                  )}
                                </td>

                                <td className='px-0 py-6 '>
                                  {formatDate(
                                    convertTimezone(item.created_at),
                                    'MMM DD, YY'
                                  )}{' '}
                                  {' At '}
                                  {formatDate(
                                    convertTimezone(item.created_at),
                                    'hh:mm A'
                                  )}
                                </td>
                                <td className='text-right '>
                                  <div className='flex justify-end'>
                                    <ActionDropdown
                                      dropdownData={actionDropdownData}
                                      itemId={item._id}
                                    />
                                  </div>
                                </td>
                              </tr>
                            )}
                          </Draggable>

                          {item.showMembers && item.members.length > 0 && (
                            <tr>
                              <td colSpan={20} className='p-0'>
                                <div className='p-3 bg-slate-20/50'>
                                  <table className='w-full bg-white/80 rounded-md shadow-2ds'>
                                    <tbody className='divide-y'>
                                      {item.members.map((member) => {
                                        return (
                                          <tr key={member._id}>
                                            <td className='px-3 py-3'>
                                              {member.email}
                                            </td>
                                            <td className='px-3 py-3'>
                                              {member.name}
                                            </td>
                                            <td className='px-3 py-3'>
                                              {member.email_verified_date &&
                                                formatDate(
                                                  convertTimezone(
                                                    member.email_verified_date
                                                  ),
                                                  'MMM DD, YY'
                                                ) +
                                                  ' At ' +
                                                  formatDate(
                                                    convertTimezone(
                                                      member.email_verified_date
                                                    ),
                                                    'hh:mm A'
                                                  )}
                                            </td>
                                            <td className='px-3 py-3'>
                                              {member.email_verified === 1
                                                ? 'Member'
                                                : 'Non Member'}
                                            </td>
                                            <td className='px-3 py-3'></td>
                                            <td className='text-right px-3 py-3'>
                                              <div className='flex justify-end'>
                                                <ActionDropdown
                                                  dropdownData={
                                                    actionDropdownData
                                                  }
                                                />
                                              </div>
                                            </td>
                                          </tr>
                                        );
                                      })}
                                    </tbody>
                                  </table>
                                </div>
                              </td>
                            </tr>
                          )}
                        </Fragment>
                      );
                    })}
                  </tbody>
                )}
              </Droppable>
            </table>
          )}
        </div>
      </div>
    </DragDropContext>

    <DragDropContext>
        <div className='bg-gray-50 min-h-screen'>
          <nav>
            <div className='flex justify-between items-center p-4 bg-white'>
              <div className='flex items-center'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  className='h-5 w-5 hidden'
                  viewBox='0 0 20 20'
                  fill='currentColor'
                >
                  <path d='M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z' />
                </svg>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  className='h-8 w-8 cursor-pointer'
                  fill='none'
                  viewBox='0 0 24 24'
                  stroke='currentColor'
                >
                  <path
                    // stroke-linecap='round'
                    // stroke-linejoin='round'
                    // stroke-width='2'
                    d='M4 6h16M4 12h8m-8 6h16'
                  />
                </svg>
              </div>
              <div className='flex items-center space-x-2'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  className='h-7 w-7 cursor-pointer'
                  fill='none'
                  viewBox='0 0 24 24'
                  stroke='currentColor'
                >
                  <path
                    // stroke-linecap='round'
                    // stroke-linejoin='round'
                    // stroke-width='2'
                    d='M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'
                  />
                </svg>
                <div className='w-10'>
                  {/* <img
                  className='rounded-full'
                  src='https://forbesthailand.com/wp-content/uploads/2021/08/https-specials-images.forbesimg.com-imageserve-5f47d4de7637290765bce495-0x0.jpgbackground000000cropX11699cropX23845cropY1559cropY22704.jpg'
                  alt=''
                /> */}
                </div>
              </div>
            </div>
          </nav>
          <div>
            <div className='p-4'>
              <div className='bg-white p-4 rounded-md'>
                <div>
                  <h2 className='mb-4 text-xl font-bold text-gray-700'>
                    Admin & User
                  </h2>
                  <div>
                    <div>
                      <div className='flex justify-between bg-gradient-to-tr from-indigo-600 to-purple-600 rounded-md py-2 px-4 text-white font-bold text-md'>
                        <div>
                          <span>Name</span>
                        </div>
                        <div>
                          <span>Email</span>
                        </div>
                        <div>
                          <span>Role</span>
                        </div>
                        <div>
                          <span>Time</span>
                        </div>
                        <div>
                          <span>Edit</span>
                        </div>
                      </div>
                      <Droppable droppableId='droppable'>
                        {(provided, snapshot) => (
                          <div ref={provided.innerRef} {...provided.innerRef}>
                            <Draggable index={1} draggableId={'6214f0e5af541f5ac559aeba'}>
                              {(provided, snapshot) => (
                                <div
                                  className='flex justify-between border-t text-sm font-normal mt-4 space-x-4'
                                  ref={provided.innerRef}
                                  { ...provided.draggableProps }
                                  {...provided.dragHandleProps}
                                >
                                  <div className='px-2 flex'>
                                    <span>John Deo</span>
                                  </div>
                                  <div>
                                    <span>johndeo@gmail.com</span>
                                  </div>
                                  <div className='px-2'>
                                    <span>Admin</span>
                                  </div>
                                  <div className='px-2'>
                                    <span>28/12/2021</span>
                                  </div>
                                  <div className='px-2'>
                                    <select>
                                      <option>Admin</option>
                                      <option>User</option>
                                    </select>
                                  </div>
                                </div>
                              )}
                            </Draggable>
                            <Draggable index={2} draggableId={'62c40f2c82ec847081e04b60'}>
                              {(provided, snapshot) => (
                                <div
                                  className='flex justify-between border-t text-sm font-normal mt-4 space-x-4'
                                  ref={provided.innerRef}
                                  { ...provided.draggableProps }
                                  {...provided.dragHandleProps}
                                >
                                  <div className='px-2 flex'>
                                    <span>John Deo</span>
                                  </div>
                                  <div>
                                    <span>johndeo@gmail.com</span>
                                  </div>
                                  <div className='px-2'>
                                    <span>Admin</span>
                                  </div>
                                  <div className='px-2'>
                                    <span>28/12/2021</span>
                                  </div>
                                  <div className='px-2'>
                                    <select>
                                      <option>Admin</option>
                                      <option>User</option>
                                    </select>
                                  </div>
                                </div>
                              )}
                            </Draggable>
                            <Draggable index={3} draggableId={'6320657429b06d24cad312de'}>
                              {(provided, snapshot) => (
                                <div
                                  className='flex justify-between border-t text-sm font-normal mt-4 space-x-4'
                                  ref={provided.innerRef}
                                  { ...provided.draggableProps }
                                  {...provided.dragHandleProps}
                                >
                                  <div className='px-2 flex'>
                                    <span>John Deo</span>
                                  </div>
                                  <div>
                                    <span>johndeo@gmail.com</span>
                                  </div>
                                  <div className='px-2'>
                                    <span>Admin</span>
                                  </div>
                                  <div className='px-2'>
                                    <span>28/12/2021</span>
                                  </div>
                                  <div className='px-2'>
                                    <select>
                                      <option>Admin</option>
                                      <option>User</option>
                                    </select>
                                  </div>
                                </div>
                              )}
                            </Draggable>
                          </div>
                        )}
                      </Droppable>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </DragDropContext>

      <DragDropContext onDragEnd={handleReorder}>
        <table className='table-auto'>
          <thead>
            <tr>
              <th>Song</th>
              <th>Artist</th>
              <th>Year</th>
            </tr>
          </thead>
          <Droppable droppableId='droppable'>
            {(provided, snapshot) => (
              <tbody ref={provided.innerRef} {...provided.droppableProps}>
                {items.map((item, index) => (
                  <Draggable key={item._id} draggableId={item._id} index={index}>
                    {(provided, snapshot) => (
                      <tr
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                      >
                        <td>{item.title}</td>
                        <td>{item.name}</td>
                        <td>{item.year}</td>
                      </tr>
                    )}
                  </Draggable>
                ))}
              </tbody>
            )}
          </Droppable>
        </table>
      </DragDropContext>
  );
};

export default List;