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 { UserManageAuthList } from './user-manage-auth-list';

export const UserManageWrap = () => {
  const { navigate } = useNavigate();

  const [authItems, setAuthItems] = useState<Array<AuthItem>>([]);

  const callAuthList = () => {
    setAuthItems([
      {useYn: true, authName: 'test01', tid: 'A12334556'},
      {useYn: true, authName: 'test02', tid: 'A33334556'},
      {useYn: true, authName: 'test03', tid: 'A12345556'},
      {useYn: true, authName: 'test04', tid: 'A12978676'},
      {useYn: false, authName: 'test05', tid: 'A12344444'},
    ]);
  };

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

  useEffect(() => {
    callAuthList();
  }, []);
  return (
    <>
      <div className="ing-list">
        <div className="input-wrapper top-select mt-16">
          <select>
            <option>nicetest00m</option>
          </select>
        </div>

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