import type {DoctorTeamInfo, OutletContextType} from "~/utils/models.ts";
import {ActionIcon, Card, Group, Table, Text, Tooltip} from "@mantine/core";
import HistoryIcon from "mdi-react/HistoryIcon";
import {iconMStyle, marginRound} from "~/styles.ts";
import EyeIcon from "mdi-react/EyeIcon";
import {useOutletContext} from "react-router";
import {DashboardPageType} from "~/utils/hms_enums.ts";
import {confirmViewTeamMembers} from "~/components/subs/confirms.tsx";
import {ResponsiveTableContainer} from "~/components/subs/ResponsiveTableContainer.tsx";


export default function({doctorTeams}: {doctorTeams: DoctorTeamInfo[]}) {
    const { changePage } = useOutletContext<OutletContextType>();

    const handleViewTeamMembers = (team: DoctorTeamInfo) => {
        confirmViewTeamMembers(team)
    }

    const teamRows = doctorTeams.map((team) => (
        <Table.Tr key={team.id}>
            <Table.Td>{team.id}</Table.Td>
            <Table.Td>{team.department.replace(/_/g, ' ')}</Table.Td>
            <Table.Td>
                {team.members.find(m => m.id === team.consultant_id)
                    ? `${team.members.find(m => m.id === team.consultant_id)?.title || ''} ${team.members.find(m => m.id === team.consultant_id)?.name || ''}`
                    : `ID: ${team.consultant_id}`}
            </Table.Td>
            <Table.Td>{team.members.length}</Table.Td>
            <Table.Td>{team.is_admin_team ? 'Yes' : 'No'}</Table.Td>
            <Table.Td>
                <Group>
                    <Tooltip label="Treatment Record" withArrow>
                        <ActionIcon onClick={() => changePage(DashboardPageType.TreatmentRecord, `/dashboard/treatment_record/t${team.id}`)}>
                            <HistoryIcon style={iconMStyle}/>
                        </ActionIcon>
                    </Tooltip>
                    <ActionIcon onClick={() => handleViewTeamMembers(team)}>
                        <EyeIcon style={iconMStyle}/>
                    </ActionIcon>
                </Group>
            </Table.Td>
        </Table.Tr>
    ));

    return(
        <Card padding="lg" radius="md" withBorder>
            <Text size="lg" fw={700} mb="md">My Medical Teams</Text>
            <Card.Section withBorder>
                <Group style={marginRound}>
                    {doctorTeams.length > 0 ? (
                        <ResponsiveTableContainer minWidth={600}>
                            <Table striped highlightOnHover withColumnBorders withTableBorder>
                                <Table.Thead>
                                    <Table.Tr>
                                        <Table.Th>Team ID</Table.Th>
                                        <Table.Th>Department</Table.Th>
                                        <Table.Th>Consultant</Table.Th>
                                        <Table.Th>Members Count</Table.Th>
                                        <Table.Th>Admin Team</Table.Th>
                                        <Table.Th>Operations</Table.Th>
                                    </Table.Tr>
                                </Table.Thead>
                                <Table.Tbody>{teamRows}</Table.Tbody>
                            </Table>
                        </ResponsiveTableContainer>
                    ) : (
                        <Text c="dimmed">You are not a member of any medical team.</Text>
                    )}
                </Group>
            </Card.Section>
        </Card>
    )
}