import { useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { AuthItem } from '../model/types';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { UserManageAuthList } from './user-manage-auth-list';
import { useUserFindMutation } from '@/entities/user/api/use-user-find-mutation';
import { UserListItem } from '@/entities/user/model/types';

export const UserManageWrap = () => {
  const { navigate } = useNavigate();
  const { mutateAsync: userFind } = useUserFindMutation();
  const [userItems, setUserItems] = useState<Array<UserListItem>>([]);
  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>('nictest00m');

  const midList = [
    { value: 'nictest00m', label: 'nictest00m' },
    { value: 'nictest01m', label: 'nictest01m' },
    { value: 'nictest02m', label: 'nictest02m' },
  ];

  const callList = (mid: string) => {
    setPageParam(pageParam);
    userFind({ mid: mid, page: pageParam }).then((rs) => {
      setUserItems(rs.content || []);
    });
  };

  const onClickToNavigation = () => {
    navigate(PATHS.account.user.addAccount);
  };

  useEffect(() => {
    callList(mid);
  }, [mid]);
  
  return (
    <>
      <div className="ing-list">
        <div className="input-wrapper top-select mt-16">
          <select value={mid} onChange={e => setMid(e.target.value)}>
            {midList.map(item => (
              <option key={item.value} value={item.value}>{item.label}</option>
            ))}
          </select>
        </div>

        <div className="ing-title">등록 현황</div>
        { (!!userItems && userItems.length > 0) &&
          <UserManageAuthList
            userItems={ userItems }
            mid={ mid }
          ></UserManageAuthList>
        }
        <div className="apply-row bottom-padding">
          <button 
            className="btn-50 btn-blue flex-1"
            onClick={ () => onClickToNavigation() }
          >사용자 추가</button>
        </div>
      </div>
    </>
  );
};