import { A, useLocation, useSearchParams } from '@solidjs/router';
import { createMemo } from 'solid-js';

type Props = {
  roleKey?: string;
};

export default function ExternalRoleTabs(props: Props) {
  const location = useLocation();
  const [searchParams] = useSearchParams();
  const activeRoleKey = createMemo(() => {
    const val = props.roleKey || searchParams.roleKey || '';
    return (Array.isArray(val) ? val[0] : val) || '';
  });
  const pathname = createMemo(() => location.pathname);

  const isRoles = createMemo(() => pathname() === '/admin/external-roles');
  const isCreate = createMemo(() => pathname() === '/admin/external-roles' && searchParams.view === 'form');
  const isInspector = createMemo(() => pathname() === '/admin/role-ui-configs');

  return (
    <div class="admin-link-tabs" style="margin-top:0">
      <A class={`admin-link-tab ${isRoles() && !isCreate() ? 'active' : ''}`} href="/admin/external-roles">View Roles</A>
      <A class={`admin-link-tab ${isCreate() ? 'active' : ''}`} href="/admin/external-roles?view=form">Create Role</A>
      <A class={`admin-link-tab ${isInspector() ? 'active' : ''}`} href={activeRoleKey() ? `/admin/role-ui-configs?roleKey=${encodeURIComponent(activeRoleKey())}` : '/admin/role-ui-configs'}>Inspector</A>
    </div>
  );
}
