import React from 'react'
import { type Meta } from '@storybook/react'
import { Heading } from '~components/Heading'
import { Text } from '~components/Text'
import { type StickerSheetStory } from '~storybook/components/StickerSheet'

import {
  AccountBasics,
  Action,
  ActionPlans,
  AddImage,
  AddUser,
  Alarm,
  Assertive,
  BCorp,
  BaselineSurvey,
  Behaviour,
  BenefitsSurvey,
  BlankSurvey,
  CalendarSync,
  CandidateSurvey,
  Cautionary,
  ChangeAgents,
  ChangeReadiness,
  ChangeSuccess,
  Coaching,
  Communications,
  Community,
  Company,
  CompanyDetails,
  Conversations,
  CustomOnboardSurvey,
  CustomSurvey,
  CustomUnattributedSurvey,
  DataVisualization,
  EmergencyResponse,
  EmployeeData,
  EndOfProbation,
  EngagementSurvey,
  EssentialProductivity,
  EssentialResilience,
  ExecutiveReportSharing,
  ExitSurvey,
  FastAction,
  Feedback,
  Fire,
  Fireworks,
  FullImport,
  Gdpr,
  GeneralOnboardSurvey,
  Goals,
  HealthAndSafety,
  HrisImport,
  InclusionSurvey,
  Individual180,
  Individual360,
  Individual360Pulse,
  InfluentialCommunication,
  Informative,
  Insights,
  InternSurvey,
  LeaderReportSharing,
  Leadership180,
  Leadership360,
  LeadingChange,
  LeadingThroughCrisis,
  Learn,
  London,
  Manager180,
  Manager360,
  Manager360Pulse,
  ManagerLearning,
  ManagerReportSharing,
  MeetingVoices,
  Melbourne,
  Microphone,
  Negative,
  NewWaysOfWorking,
  NewYork,
  Objective,
  OneOnOne,
  PCDPulseSurvey,
  PCDSurvey,
  PaperPen,
  PartialImport,
  PerformanceDiagnostics,
  PhasedWeek1OnboardSurvey,
  PhasedWeek5OnboardSurvey,
  Positive,
  PowerfulInsights,
  Process,
  Productivity,
  PulseSurvey,
  QuickEngagementSurvey,
  ReOnboarding,
  ReadArticle,
  Recommendation,
  RemoteManager,
  RemoteOnboardSurvey,
  RemoteWorkQSet,
  ReportSharing,
  Resilience,
  Resources,
  Response,
  ReturnToWorkplace,
  SanFrancisco,
  ScienceBackedTools,
  ShareReport,
  SinglePointOnboardSurvey,
  SkillsDevelopment,
  SpreadsheetTemplate,
  Starburst,
  Stop,
  Strategy,
  TakeAim,
  Team1,
  Team2,
  TeamEffectiveness1,
  TeamEffectiveness2,
  TeamEffectiveness3,
  Templates,
  Timezone,
  TrafficCone,
  Training1,
  Training2,
  Training3,
  Trophy,
  UnderConstruction,
  ValueAdd,
  ValuesSurvey1,
  ValuesSurvey2,
  Video,
  ViewReports,
  WellbeingSurvey1,
  WellbeingSurvey2,
  WellbeingSurvey3,
  WellbeingSurvey,
  Workshop,
  type SpotProps,
} from '../'

export default {
  title: 'Components/Illustrations/Spot',
  parameters: {
    chromatic: { disable: false },
    controls: { disable: true },
  },
} satisfies Meta

const performanceCultureDiagnosticSpots = [
  {
    Component: PCDSurvey,
    name: 'PCDSurvey',
  },
  {
    Component: PCDPulseSurvey,
    name: 'PCDPulseSurvey',
  },
]

const engagementSpots = [
  {
    Component: BenefitsSurvey,
    name: 'BenefitsSurvey',
  },
  {
    Component: CustomSurvey,
    name: 'CustomSurvey',
  },
  {
    Component: CustomUnattributedSurvey,
    name: 'CustomUnattributedSurvey',
  },
  {
    Component: EngagementSurvey,
    name: 'EngagementSurvey',
  },
  {
    Component: InclusionSurvey,
    name: 'InclusionSurvey',
  },
  {
    Component: QuickEngagementSurvey,
    name: 'QuickEngagementSurvey',
  },
  {
    Component: ValuesSurvey1,
    name: 'ValuesSurvey1',
  },
  {
    Component: ValuesSurvey2,
    name: 'ValuesSurvey2',
  },
  {
    Component: WellbeingSurvey1,
    name: 'WellbeingSurvey1',
  },
  {
    Component: WellbeingSurvey2,
    name: 'WellbeingSurvey2',
  },
  {
    Component: WellbeingSurvey3,
    name: 'WellbeingSurvey3',
  },
  {
    Component: ChangeReadiness,
    name: 'ChangeReadiness',
  },
  {
    Component: ChangeSuccess,
    name: 'ChangeSuccess',
  },
  {
    Component: PerformanceDiagnostics,
    name: 'PerformanceDiagnostics',
  },
  {
    Component: LeadingThroughCrisis,
    name: 'LeadingThroughCrisis',
  },
  {
    Component: EmergencyResponse,
    name: 'EmergencyResponse',
  },
]

const experienceSpots = [
  {
    Component: PhasedWeek1OnboardSurvey,
    name: 'PhasedWeek1OnboardSurvey',
  },
  {
    Component: PhasedWeek5OnboardSurvey,
    name: 'PhasedWeek5OnboardSurvey',
  },
  {
    Component: RemoteOnboardSurvey,
    name: 'RemoteOnboardSurvey',
  },
  {
    Component: GeneralOnboardSurvey,
    name: 'GeneralOnboardSurvey',
  },
  {
    Component: CustomOnboardSurvey,
    name: 'CustomOnboardSurvey',
  },
  {
    Component: CandidateSurvey,
    name: 'CandidateSurvey',
  },
  {
    Component: ExitSurvey,
    name: 'ExitSurvey',
  },
  {
    Component: InternSurvey,
    name: 'InternSurvey',
  },
  {
    Component: SinglePointOnboardSurvey,
    name: 'SinglePointOnboardSurvey',
  },
  {
    Component: HealthAndSafety,
    name: 'HealthAndSafety',
  },
  {
    Component: EndOfProbation,
    name: 'EndOfProbation',
  },
  {
    Component: NewWaysOfWorking,
    name: 'NewWaysOfWorking',
  },
  {
    Component: ReOnboarding,
    name: 'ReOnboarding',
  },
]

const performanceSpots = [
  {
    Component: Individual360,
    name: 'Individual360',
  },
  {
    Component: Individual360Pulse,
    name: 'Individual360Pulse',
  },
  {
    Component: Leadership360,
    name: 'Leadership360',
  },
  {
    Component: Manager360,
    name: 'Manager360',
  },
  {
    Component: Manager360Pulse,
    name: 'Manager360Pulse',
  },
  {
    Component: Individual180,
    name: 'Individual180',
  },
  {
    Component: Leadership180,
    name: 'Leadership180',
  },
  {
    Component: Manager180,
    name: 'Manager180',
  },
  {
    Component: TeamEffectiveness1,
    name: 'TeamEffectiveness1',
  },
  {
    Component: TeamEffectiveness2,
    name: 'TeamEffectiveness2',
  },
  {
    Component: TeamEffectiveness3,
    name: 'TeamEffectiveness3',
  },
]

const covidSpots = [
  {
    Component: Response,
    name: 'Response',
  },
  {
    Component: WellbeingSurvey,
    name: 'WellbeingSurvey',
  },
  {
    Component: RemoteWorkQSet,
    name: 'RemoteWorkQSet',
  },
  {
    Component: ReturnToWorkplace,
    name: 'ReturnToWorkplace',
  },
  {
    Component: PulseSurvey,
    name: 'PulseSurvey',
  },
]

const newAccountSpots = [
  {
    Component: AccountBasics,
    name: 'AccountBasics',
  },
  {
    Component: CompanyDetails,
    name: 'CompanyDetails',
  },
  {
    Component: EmployeeData,
    name: 'EmployeeData',
  },
  {
    Component: Gdpr,
    name: 'Gdpr',
  },
  {
    Component: Timezone,
    name: 'Timezone',
  },
  {
    Component: AddUser,
    name: 'AddUser',
  },
]

const officeSpots = [
  {
    Component: London,
    name: 'London',
  },
  {
    Component: Melbourne,
    name: 'Melbourne',
  },
  {
    Component: NewYork,
    name: 'NewYork',
  },
  {
    Component: SanFrancisco,
    name: 'SanFrancisco',
  },
]

const moodSpots = [
  {
    Component: Cautionary,
    name: 'Cautionary',
  },
  {
    Component: Informative,
    name: 'Informative',
  },
  {
    Component: Negative,
    name: 'Negative',
  },
  {
    Component: Assertive,
    name: 'Assertive',
  },
  {
    Component: Positive,
    name: 'Positive',
  },
]

const managerLearningSpots = [
  {
    Component: OneOnOne,
    name: 'OneOnOne',
  },
  {
    Component: Productivity,
    name: 'Productivity',
  },
  {
    Component: Strategy,
    name: 'Strategy',
  },
  {
    Component: Resilience,
    name: 'Resilience',
  },
  {
    Component: Coaching,
    name: 'Coaching',
  },
  {
    Component: Feedback,
    name: 'Feedback',
  },
  {
    Component: RemoteManager,
    name: 'RemoteManager',
  },
  {
    Component: ManagerLearning,
    name: 'ManagerLearning',
  },
  {
    Component: EssentialProductivity,
    name: 'EssentialProductivity',
  },
  {
    Component: EssentialResilience,
    name: 'EssentialResilience',
  },
  {
    Component: LeadingChange,
    name: 'LeadingChange',
  },
  {
    Component: InfluentialCommunication,
    name: 'InfluentialCommunication',
  },
]

const miscellaneousSpots = [
  {
    Component: ViewReports,
    name: 'ViewReports',
  },
  {
    Component: ReadArticle,
    name: 'ReadArticle',
  },
  {
    Component: FastAction,
    name: 'FastAction',
  },
  {
    Component: BaselineSurvey,
    name: 'BaselineSurvey',
  },
  {
    Component: Team1,
    name: 'Team1',
  },
  {
    Component: Team2,
    name: 'Team2',
  },
  {
    Component: Recommendation,
    name: 'Recommendation',
  },
  {
    Component: AddImage,
    name: 'AddImage',
  },
  {
    Component: MeetingVoices,
    name: 'MeetingVoices',
  },
  {
    Component: Workshop,
    name: 'Workshop',
  },
  {
    Component: Video,
    name: 'Video',
  },
  {
    Component: ReportSharing,
    name: 'ReportSharing',
  },
  {
    Component: BlankSurvey,
    name: 'BlankSurvey',
  },
  {
    Component: TakeAim,
    name: 'TakeAim',
  },
  {
    Component: Action,
    name: 'Action',
  },
  {
    Component: Training1,
    name: 'Training1',
  },
  {
    Component: Training2,
    name: 'Training2',
  },
  {
    Component: Training3,
    name: 'Training3',
  },
  {
    Component: ShareReport,
    name: 'ShareReport',
  },
  {
    Component: ExecutiveReportSharing,
    name: 'ExecutiveReportSharing',
  },
  {
    Component: ManagerReportSharing,
    name: 'ManagerReportSharing',
  },
  {
    Component: LeaderReportSharing,
    name: 'LeaderReportSharing',
  },
  {
    Component: SpreadsheetTemplate,
    name: 'SpreadsheetTemplate',
  },
  {
    Component: FullImport,
    name: 'FullImport',
  },
  {
    Component: PartialImport,
    name: 'PartialImport',
  },
  {
    Component: HrisImport,
    name: 'HrisImport',
  },
  {
    Component: Alarm,
    name: 'Alarm',
  },
  {
    Component: Fire,
    name: 'Fire',
  },
  {
    Component: UnderConstruction,
    name: 'UnderConstruction',
  },
  {
    Component: Stop,
    name: 'Stop',
  },
  {
    Component: Trophy,
    name: 'Trophy',
  },
  {
    Component: TrafficCone,
    name: 'TrafficCone',
  },
  {
    Component: ValueAdd,
    name: 'ValueAdd',
  },
  {
    Component: Starburst,
    name: 'Starburst',
  },
  {
    Component: Fireworks,
    name: 'Fireworks',
  },
  {
    Component: Objective,
    name: 'Objective',
  },
  {
    Component: PaperPen,
    name: 'PaperPen',
  },
  {
    Component: DataVisualization,
    name: 'DataVisualization',
  },
  {
    Component: Community,
    name: 'Community',
  },
  {
    Component: BCorp,
    name: 'BCorp',
  },
  {
    Component: Resources,
    name: 'Resources',
  },
  {
    Component: Goals,
    name: 'Goals',
  },
  {
    Component: Communications,
    name: 'Communications',
  },
  {
    Component: ScienceBackedTools,
    name: 'ScienceBackedTools',
  },
  {
    Component: Microphone,
    name: 'Microphone',
  },
  {
    Component: Company,
    name: 'Company',
  },
  {
    Component: Insights,
    name: 'Insights',
  },
  {
    Component: Behaviour,
    name: 'Behaviour',
  },
  {
    Component: Learn,
    name: 'Learn',
  },
  {
    Component: Templates,
    name: 'Templates',
  },
  {
    Component: PowerfulInsights,
    name: 'PowerfulInsights',
  },
  {
    Component: ActionPlans,
    name: 'ActionPlans',
  },
  {
    Component: Conversations,
    name: 'Conversations',
  },
  {
    Component: Process,
    name: 'Process',
  },
  {
    Component: SkillsDevelopment,
    name: 'SkillsDevelopment',
  },
  {
    Component: ChangeAgents,
    name: 'ChangeAgents',
  },
  {
    Component: CalendarSync,
    name: 'CalendarSync',
  },
]

type IllustrationSpot = (props: SpotProps) => JSX.Element

const IllustrationExampleTile = ({
  Component,
  name,
}: {
  Component: IllustrationSpot
  name: string
}): JSX.Element => (
  <div className="w-[150px] inline-flex flex-col p-32 items-center">
    <Component />
    <Text variant="small">{name}</Text>
  </div>
)

const StickerSheetTemplate: StickerSheetStory = {
  render: () => (
    <div className="grid gap-24">
      <div>
        <Heading variant="heading-3">Performance Culture Diagnostic</Heading>
        <div className="flex flex-wrap ">
          {performanceCultureDiagnosticSpots.map((props, i) => (
            <IllustrationExampleTile key={`engagement-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">Engagement</Heading>
        <div className="flex flex-wrap ">
          {engagementSpots.map((props, i) => (
            <IllustrationExampleTile key={`engagement-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">Experience</Heading>
        <div className="flex flex-wrap ">
          {experienceSpots.map((props, i) => (
            <IllustrationExampleTile key={`experience-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">Performance</Heading>
        <div className="flex flex-wrap ">
          {performanceSpots.map((props, i) => (
            <IllustrationExampleTile key={`performance-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">COVID-19</Heading>
        <div className="flex flex-wrap ">
          {covidSpots.map((props, i) => (
            <IllustrationExampleTile key={`covid-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">New Account</Heading>
        <div className="flex flex-wrap ">
          {newAccountSpots.map((props, i) => (
            <IllustrationExampleTile key={`new-account-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">Moods</Heading>
        <div className="flex flex-wrap ">
          {moodSpots.map((props, i) => (
            <IllustrationExampleTile key={`moods-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">Skills Coach</Heading>
        <div className="flex flex-wrap ">
          {managerLearningSpots.map((props, i) => (
            <IllustrationExampleTile key={`skills-coach-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">Offices</Heading>
        <div className="flex flex-wrap ">
          {officeSpots.map((props, i) => (
            <IllustrationExampleTile key={`offices-${i}`} {...props} />
          ))}
        </div>
      </div>

      <div>
        <Heading variant="heading-3">Miscellaneous</Heading>
        <div className="flex flex-wrap ">
          {miscellaneousSpots.map((props, i) => (
            <IllustrationExampleTile key={`misc-${i}`} {...props} />
          ))}
        </div>
      </div>
    </div>
  ),
}

export const StickerSheetDefault: StickerSheetStory = {
  ...StickerSheetTemplate,
  name: 'Sticker Sheet (Default)',
}