use leptos::prelude::*;

#[component]
fn TablerOutlineIcon(#[prop(into, optional)] class: String, children: Children) -> impl IntoView {
    view! {
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class=class
            aria-hidden="true"
        >
            {children()}
        </svg>
    }
}

#[component]
fn DashboardIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1" />
            <path d="M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1" />
            <path d="M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1" />
            <path d="M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1" />
        </TablerOutlineIcon>
    }
}

#[component]
fn EmployeeManagementIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
            <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
            <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
            <path d="M17 10h2a2 2 0 0 1 2 2v1" />
            <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
            <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
        </TablerOutlineIcon>
    }
}

#[component]
fn ImageAnnotationIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M15 8h.01" />
            <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" />
            <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" />
            <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
        </TablerOutlineIcon>
    }
}

#[component]
fn LidarAnnotationIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M6 17.6l-2 -1.1v-2.5" />
            <path d="M4 10v-2.5l2 -1.1" />
            <path d="M10 4.1l2 -1.1l2 1.1" />
            <path d="M18 6.4l2 1.1v2.5" />
            <path d="M20 14v2.5l-2 1.12" />
            <path d="M14 19.9l-2 1.1l-2 -1.1" />
            <path d="M12 12l2 -1.1" />
            <path d="M18 8.6l2 -1.1" />
            <path d="M12 12l0 2.5" />
            <path d="M12 18.5l0 2.5" />
            <path d="M12 12l-2 -1.12" />
            <path d="M6 8.6l-2 -1.1" />
        </TablerOutlineIcon>
    }
}

#[component]
fn ManagementCenterIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" />
            <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
        </TablerOutlineIcon>
    }
}

#[component]
fn MyProjectsIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
        </TablerOutlineIcon>
    }
}

#[component]
fn PersonalCenterIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
            <path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
            <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
        </TablerOutlineIcon>
    }
}

#[component]
fn ProjectCategoryIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M14 4h6v6h-6l0 -6" />
            <path d="M4 14h6v6h-6l0 -6" />
            <path d="M14 17a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
            <path d="M4 7a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
        </TablerOutlineIcon>
    }
}

#[component]
fn ProjectManagementIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M9 3h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
            <path d="M17 16v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h2" />
        </TablerOutlineIcon>
    }
}

#[component]
fn ReportIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
            <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" />
            <path d="M9 9l1 0" />
            <path d="M9 13l6 0" />
            <path d="M9 17l6 0" />
        </TablerOutlineIcon>
    }
}

#[component]
fn WorkloadIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
            <path d="M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2" />
            <path d="M10 14l4 0" />
            <path d="M12 12l0 4" />
        </TablerOutlineIcon>
    }
}

#[component]
fn TeamManagementIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M10 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
            <path d="M6 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
            <path d="M10 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
            <path d="M18 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
            <path d="M2 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
            <path d="M14 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
            <path d="M5 17l2 -3" />
            <path d="M9 10l2 -3" />
            <path d="M13 7l2 3" />
            <path d="M17 14l2 3" />
            <path d="M15 14l-2 3" />
            <path d="M9 14l2 3" />
        </TablerOutlineIcon>
    }
}

#[component]
fn VideoAnnotationIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4" />
            <path d="M3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -8" />
        </TablerOutlineIcon>
    }
}

#[component]
fn LockIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6" />
            <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
            <path d="M8 11v-4a4 4 0 1 1 8 0v4" />
        </TablerOutlineIcon>
    }
}

#[component]
fn LogoutIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
            <path d="M9 12h12l-3 -3" />
            <path d="M18 15l3 -3" />
        </TablerOutlineIcon>
    }
}

#[component]
fn ChevronDownIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M6 9l6 6l6 -6" />
        </TablerOutlineIcon>
    }
}

#[component]
fn ChevronLeftIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M15 6l-6 6l6 6" />
        </TablerOutlineIcon>
    }
}

#[component]
fn ChevronRightIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M9 6l6 6l-6 6" />
        </TablerOutlineIcon>
    }
}

#[component]
fn EditIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
            <path d="M16 5l3 3" />
        </TablerOutlineIcon>
    }
}

#[component]
fn UploadIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
            <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" />
            <path d="M12 17v-6" />
            <path d="M9.5 13.5l2.5 -2.5l2.5 2.5" />
        </TablerOutlineIcon>
    }
}

#[component]
fn InfoCircleIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! {
        <TablerOutlineIcon class=class>
            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
            <path d="M12 9h.01" />
            <path d="M11 12h1v4h1" />
        </TablerOutlineIcon>
    }
}

#[component]
fn SystemIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! { <ManagementCenterIcon class=class /> }
}

#[component]
fn PersonalMenuIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! { <PersonalCenterIcon class=class /> }
}

#[component]
fn TaskMenuIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! { <DashboardIcon class=class /> }
}

#[component]
fn AuthMenuIcon(#[prop(into, optional)] class: String) -> impl IntoView {
    view! { <ReportIcon class=class /> }
}

#[component]
pub fn ClientIcon(
    icon: Option<&'static str>,
    #[prop(into, optional)] class: String,
) -> impl IntoView {
    match icon {
        Some("DashboardIcon") => view! { <DashboardIcon class=class.clone() /> }.into_any(),
        Some("EmployeeManagementIcon") => {
            view! { <EmployeeManagementIcon class=class.clone() /> }.into_any()
        }
        Some("ImageAnnotationIcon") => {
            view! { <ImageAnnotationIcon class=class.clone() /> }.into_any()
        }
        Some("LidarAnnotationIcon") => {
            view! { <LidarAnnotationIcon class=class.clone() /> }.into_any()
        }
        Some("ManagementCenterIcon") => {
            view! { <ManagementCenterIcon class=class.clone() /> }.into_any()
        }
        Some("MyProjectsIcon") => view! { <MyProjectsIcon class=class.clone() /> }.into_any(),
        Some("PersonalCenterIcon") => {
            view! { <PersonalCenterIcon class=class.clone() /> }.into_any()
        }
        Some("ProjectCategoryIcon") => {
            view! { <ProjectCategoryIcon class=class.clone() /> }.into_any()
        }
        Some("ProjectManagementIcon") => {
            view! { <ProjectManagementIcon class=class.clone() /> }.into_any()
        }
        Some("ReportIcon") => view! { <ReportIcon class=class.clone() /> }.into_any(),
        Some("WorkloadIcon") => view! { <WorkloadIcon class=class.clone() /> }.into_any(),
        Some("TeamManagementIcon") => {
            view! { <TeamManagementIcon class=class.clone() /> }.into_any()
        }
        Some("VideoAnnotationIcon") => {
            view! { <VideoAnnotationIcon class=class.clone() /> }.into_any()
        }
        Some("LockIcon") => view! { <LockIcon class=class.clone() /> }.into_any(),
        Some("LogoutIcon") => view! { <LogoutIcon class=class.clone() /> }.into_any(),
        Some("ChevronDownIcon") => view! { <ChevronDownIcon class=class.clone() /> }.into_any(),
        Some("ChevronLeftIcon") => view! { <ChevronLeftIcon class=class.clone() /> }.into_any(),
        Some("ChevronRightIcon") => view! { <ChevronRightIcon class=class.clone() /> }.into_any(),
        Some("EditIcon") => view! { <EditIcon class=class.clone() /> }.into_any(),
        Some("UploadIcon") => view! { <UploadIcon class=class.clone() /> }.into_any(),
        Some("InfoCircleIcon") => view! { <InfoCircleIcon class=class.clone() /> }.into_any(),
        Some("SystemIcon") => view! { <SystemIcon class=class.clone() /> }.into_any(),
        Some("PersonalMenuIcon") => view! { <PersonalMenuIcon class=class.clone() /> }.into_any(),
        Some("TaskMenuIcon") => view! { <TaskMenuIcon class=class.clone() /> }.into_any(),
        Some("AuthMenuIcon") => view! { <AuthMenuIcon class=class /> }.into_any(),
        _ => {
            let _: () = view! { <></> };
            ().into_any()
        }
    }
}