import CreateSchool from '../components/CreateSchool';
import CreateInstDesigner from '../components/CreateInstDesigner';
import CreateTeacher from '../components/CreateTeacher';
import { useParams } from 'react-router-dom';
import CreateAdmin from '../components/CreateAdmin';
import { useLocation } from 'react-router-dom';
import UpdatePassword from '../components/UpdatePassword';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
const EditAccount = () => {
  const { state } = useLocation();
  const { userId } = useParams();
  const { role } = state;
  if (!state || !userId || !role)
    return (
      <div className="flex items-center justify-center h-[50%]">
        <h3>Not Found</h3>
      </div>
    );

  return (
    <section>
      <span className="flex items-center justify-center py-2 text-slate-700 text-[26px] font-semibold">
        Edit Account
      </span>

      <Tabs defaultValue="update_info" className="flex flex-col items-center ">
        <TabsList className="flex justify-center w-fit">
          <TabsTrigger value="update_info" className="font-semibold">
            Update-Info
          </TabsTrigger>
          <TabsTrigger value="update_password" className="font-semibold">
            Update-Password
          </TabsTrigger>
        </TabsList>
        <TabsContent value="update_info" className="w-full">
          {role === 'school' && <CreateSchool isEdit userId={userId} />}
          {role === 'inst_designer' && (
            <CreateInstDesigner isEdit userId={userId} />
          )}
          {role === 'teacher' && <CreateTeacher isEdit userId={userId} />}
          {(role === 'admin' || role === 'super_admin' || role === 'inst_admin')  && <CreateAdmin isEdit userId={userId} />}
        </TabsContent>
        <TabsContent value="update_password" className="w-full">
          <UpdatePassword userId={userId}/>
        </TabsContent>
      </Tabs>
    </section>
  );
};

export default EditAccount;