import useTranslation from 'next-translate/useTranslation';
import React, { FC, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import CRUDBuilder from '../../../utils/CRUDBuilder/CRUDBuilder';
import { ItemType } from '../../../utils/CRUDBuilder/types';

import { DeleteUserAsync, FetchUsersAsync, InsertUserAsync, selectUsers, UpdateUserAsync } from '../../../redux/user';
import { GetServerSideProps } from 'next';
import { DashboardAuthenticated } from '../../../utils/helpers/dashboard-authenticated';
import { Select, Typography } from 'antd';
import { FetchRolesAsync, selectRole } from '../../../redux';

export const columnsUsers: ItemType[] = [
  {
    columnType: {
      title: 'ID',
      dataIndex: 'id',
      fixed: 'left',
      width: 100,
    },
    type: 'primary-key',
  },
  {
    columnType: {
      title: 'First Name',
      dataIndex: 'first_name',
      width: 200,
    },
    type: 'text',
  },
  {
    columnType: {
      title: 'Last Name',
      dataIndex: 'last_name',
      width: 200,
    },
    type: 'text',
  },
  {
    columnType: {
      title: 'Email',
      dataIndex: 'email',
      width: 200,
    },
    type: 'text',
  },
  {
    columnType: {
      title: 'Password',
      dataIndex: 'password',
      width: 200,
    },
    type: 'text-not-required',
  },
  {
    columnType: {
      title: 'Phone',
      dataIndex: 'phone',
      width: 200,
    },
    type: 'text',
  },
  {
    columnType: {
      title: 'Permissions',
      dataIndex: 'permissions',
      width: 300,
      render: (arr: { name: string }[]) => (
        <Select style={{ width: '100%' }}>
          {arr.map((el) => (
            <Select.Option key={el.name} value={el.name}>
              {el.name}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    type: 'selectable-multi-foreign-key',
    foreignKeyArr: [{ title: 'Don`t choose', value: 'Don`t choose' }],
    demo: true,
  },
];

const ManageUsers: FC = () => {
  const { users, status } = useSelector(selectUsers);
  const { roles } = useSelector(selectRole);

  const { lang } = useTranslation();

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(FetchUsersAsync());
    dispatch(FetchRolesAsync());
  }, [dispatch]);

  const tmp: ItemType[] = [
    {
      columnType: {
        title: 'Role',
        dataIndex: 'roles',
        width: 200,
        render: (arr: { name: string }[]) => arr[0]?.name,
      },
      type: 'signable-multi-foreign-key',
      foreignKeyArr: roles.map((el) => ({ title: el.name, value: el.name })),
      getInitialValue: (val: { id: number; name: string }[]) => val[0]?.name,
      required: false,
    },
  ];

  return (
    <CRUDBuilder
      lang={lang === 'en' ? 'en' : 'ar'}
      items={users}
      loading={status === 'loading'}
      AddAsync={(el) => InsertUserAsync({ user: el.item })}
      UpdateAsync={(el) => UpdateUserAsync({ user: el.item, id: el.id })}
      DeleteAsync={(el) => DeleteUserAsync({ id: el.id })}
      itemsHeader={[...columnsUsers, ...tmp]}
    />
  );
};
export default ManageUsers;

export const getServerSideProps: GetServerSideProps = DashboardAuthenticated;