// Ordered by shown in the app
import {SvgProps} from 'react-native-svg';
import Storybook from '@assets/widgets/storybook.svg';
import Forms from '@assets/widgets/forms.svg';
import People from '@assets/widgets/people.svg';
import Calendar from '@assets/widgets/calendar.svg';
import CheckHistory from '@assets/widgets/checkHistory.svg';
import TimeControl from '@assets/widgets/timeControl.svg';
import OrganizationChart from '@assets/widgets/orgChart.svg';
import Files from '@assets/widgets/files.svg';
import MyDocuments from '@assets/widgets/myDocuments.svg';
import Onboardings from '@assets/widgets/onboardings.svg';
import Surveys from '@assets/widgets/surveys.svg';
import Marketplace from '@assets/widgets/marketplace.svg';
import TimeOff from '@assets/widgets/timeOff.svg';
import PerformanceReview from '@assets/widgets/performanceReview.svg';
import AgentWorkspace from '@assets/widgets/agentWorkspace.svg';
import ServicePortal from '@assets/widgets/servicePortal.svg';
import Courses from '@assets/widgets/courses.svg';
import Goals from '@assets/widgets/goals.svg';
import PeopleExperience from '@assets/widgets/peopleExperience.svg';
import Events from '@assets/widgets/events.svg';
import Libraries from '@assets/widgets/libraries.svg';
import Drafts from '@assets/widgets/drafts.svg';
import Tasks from '@assets/widgets/tasks.svg';
import Prode from '@assets/widgets/prode.svg';
import Loans from '@assets/widgets/loans.svg';
import JobsPortal from '@assets/widgets/jobsPortal.svg';
// Custom development icons
import NemakAcknowledgments from '@assets/widgets/nemakAcknowledgments.svg';
import NemakEvents from '@assets/widgets/nemakEvents.svg';
import BanBajioRequests from '@assets/widgets/banBajioRequests.svg';
import PayrollMobilityAdo from '@assets/widgets/payrollMobilityAdo.svg';
import {COLORS, FEEDBACK_COLORS} from '@shared/theme';

export const useAppModuleIcons = () => {
  // TODO: Update this once we have a proper theming system. Uncomment to show the themed color
  // If no color is provided, the icon will use the default color.
  const themedColor = null; // '#496BE3';

  return {
    STORYBOOK: (props: SvgProps) => (
      <Storybook {...props} fill={themedColor || COLORS.lightBlue[600]} />
    ),
    FORM: (props: SvgProps) => (
      <Forms {...props} fill={themedColor || COLORS.lilac[400]} />
    ),
    AGENDA: (props: SvgProps) => (
      <People {...props} fill={themedColor || COLORS.blue[400]} />
    ),
    SHIFTS_CALENDAR: (props: SvgProps) => (
      <Calendar {...props} fill={themedColor || COLORS.yellow[400]} />
    ),
    CHECK_HISTORY: (props: SvgProps) => (
      <CheckHistory {...props} fill={themedColor || COLORS.blue[400]} />
    ),
    CONTROL_MODULE: (props: SvgProps) => (
      <TimeControl {...props} fill={themedColor || COLORS.green[600]} />
    ),
    ORGANIZATION_CHARTS: (props: SvgProps) => (
      <OrganizationChart {...props} fill={themedColor || COLORS.rust[400]} />
    ),
    FILES: (props: SvgProps) => (
      <Files {...props} fill={themedColor || COLORS.yellow[400]} />
    ),
    DOCUMENTS: (props: SvgProps) => (
      <MyDocuments {...props} fill={themedColor || COLORS.pink[400]} />
    ),
    ONBOARDINGS: (props: SvgProps) => (
      <Onboardings {...props} fill={themedColor || COLORS.lilac[400]} />
    ),
    SURVEY: (props: SvgProps) => (
      <Surveys {...props} fill={themedColor || COLORS.lilac[400]} />
    ),
    STORE: (props: SvgProps) => (
      <Marketplace {...props} fill={themedColor || COLORS.red[400]} />
    ),
    TIME_OFF: (props: SvgProps) => (
      <TimeOff {...props} fill={themedColor || COLORS.blue[400]} />
    ),
    PERFORMANCE_REVIEW: (props: SvgProps) => (
      <PerformanceReview {...props} fill={themedColor || COLORS.yellow[400]} />
    ),
    AGENT_WORKSPACE: (props: SvgProps) => (
      <AgentWorkspace {...props} fill={themedColor || COLORS.lightBlue[600]} />
    ),
    SERVICE_PORTAL: (props: SvgProps) => (
      <ServicePortal {...props} fill={themedColor || COLORS.lilac[400]} />
    ),
    COURSES: (props: SvgProps) => (
      <Courses {...props} fill={themedColor || COLORS.teal[400]} />
    ),
    GOALS: (props: SvgProps) => (
      <Goals {...props} fill={themedColor || COLORS.red[400]} />
    ),
    PEOPLE_EXPERIENCE: (props: SvgProps) => (
      <PeopleExperience {...props} fill={themedColor || COLORS.mulberry[400]} />
    ),
    EVENTS: (props: SvgProps) => (
      <Events {...props} fill={themedColor || COLORS.lightBlue[600]} />
    ),
    LIBRARIES: (props: SvgProps) => (
      <Libraries {...props} fill={themedColor || COLORS.blue[400]} />
    ),
    DRAFTS: (props: SvgProps) => (
      <Drafts {...props} fill={themedColor || COLORS.lilac[400]} />
    ),
    TASKS: (props: SvgProps) => (
      <Tasks {...props} fill={themedColor || COLORS.lightBlue[600]} />
    ),
    PRODE: (props: SvgProps) => (
      <Prode {...props} fill={themedColor || COLORS.yellow[400]} />
    ),
    LOANS: (props: SvgProps) => (
      <Loans {...props} fill={themedColor || COLORS.green[600]} />
    ),
    JOBS_PORTAL: (props: SvgProps) => (
      <JobsPortal {...props} fill={themedColor || COLORS.blue[400]} />
    ),
    // LaComer custom icons
    LACOMER_MY_COURSES: (props: SvgProps) => (
      <Courses {...props} fill={themedColor || COLORS.blue[400]} />
    ),
    LACOMER_CURRICULUM: (props: SvgProps) => (
      <Courses {...props} fill={themedColor || FEEDBACK_COLORS.warning[600]} />
    ),
    // Custom icons
    NEMAK_ACKNOWLEDGMENTS: (props: SvgProps) => (
      <NemakAcknowledgments
        {...props}
        fill={themedColor || COLORS.yellow[400]}
      />
    ),
    NEMAK_EVENTS: (props: SvgProps) => (
      <NemakEvents {...props} fill={themedColor || COLORS.lilac[400]} />
    ),
    BAN_BAJIO_REQUESTS: (props: SvgProps) => (
      <BanBajioRequests {...props} fill={themedColor || COLORS.yellow[400]} />
    ),
    PAYROLL_MOBILITY_ADO: (props: SvgProps) => (
      <PayrollMobilityAdo {...props} fill={themedColor || COLORS.lilac[400]} />
    ),
    // Deprecated modules icons
    TRAINING: (props: SvgProps) => (
      <Courses {...props} fill={themedColor || COLORS.lightBlue[600]} />
    ),
  };
};