import React from 'react';
import { Meta, Story } from '@storybook/react';
import { memori, tenant, history } from '../../mocks/data';
import I18nWrapper from '../../I18nWrapper';
import Header, { Props } from './Header';
import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
import LoginDrawer from '../LoginDrawer/LoginDrawer'; 
import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';

import './Header.css';

const meta: Meta = {
  title: 'Widget/Header',
  component: Header,
  argTypes: {
    showShare: {
      control: {
        type: 'boolean',
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const historyWithConsumption = [
  ...history,
  {
    ...history[history.length - 1],
    llmUsage: {
      energyImpact: {
        energy: { parsedValue: 0.0012 },
        gwp: { parsedValue: 0.00045 },
        wcf: { parsedValue: 0.0021 },
      },
    },
  },
  {
    ...history[history.length - 1],
    text: 'Second sustainability sample',
    llmUsage: {
      energyImpact: {
        energy: 0.0008,
        gwp: { source: '0.00035' },
        wcf: { source: '0.0014' },
      },
    },
  },
] as any;

const Template: Story<Props> = args => {
  const [speakerMuted, setSpeakerMuted] = React.useState(args.speakerMuted);
  const [showSettingsDrawer, setShowSettingsDrawer] = React.useState(false);
  const [showKnownFactsDrawer, setShowKnownFactsDrawer] = React.useState(false);
  const [showExpertsDrawer, setShowExpertsDrawer] = React.useState(false);
  const [continuousSpeech, setContinuousSpeech] = React.useState(true);
  const [continuousSpeechTimeout, setContinuousSpeechTimeout] =
    React.useState(2);
  const [showLoginDrawer, setShowLoginDrawer] = React.useState(false);

  return (
    <I18nWrapper>
      <ArtifactProvider>
      <Header
        {...args}
        speakerMuted={speakerMuted}
        setSpeakerMuted={setSpeakerMuted}
        showSettings
        setShowSettingsDrawer={() => setShowSettingsDrawer(true)}
        setShowKnownFactsDrawer={() => setShowKnownFactsDrawer(true)}
        setShowExpertsDrawer={() => setShowExpertsDrawer(true)}
        setShowLoginDrawer={() => setShowLoginDrawer(true)}
      />
      <SettingsDrawer
        open={!!showSettingsDrawer}
        onClose={() => setShowSettingsDrawer(false)}
        microphoneMode="HOLD_TO_TALK"
        setMicrophoneMode={() => {}}
        continuousSpeechTimeout={2}
        setContinuousSpeechTimeout={() => {}}
        controlsPosition="bottom"
        setControlsPosition={() => {}}
        hideEmissions={false}
        setHideEmissions={() => {}}
        setAvatarType={() => {}}
        setEnablePositionControls={() => {}}
      />
      <LoginDrawer
        setUser={() => {}}
        tenant={tenant}
        open={!!showLoginDrawer}
        onClose={() => setShowLoginDrawer(false)}
        onLogin={(user, token) => {
          console.log(user, token);
          setShowLoginDrawer(false);
        }}
        onLogout={() => setShowLoginDrawer(false)}
        apiClient={
          {
            backend: {},
          } as any
        }
      />
      </ArtifactProvider>
    </I18nWrapper>
  );
};

// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
// https://storybook.js.org/docs/react/workflows/unit-testing
export const Default = Template.bind({});
Default.args = {
  memori,
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: false,
  showShare: false,
  showSettings: false,
};

export const WithPosition = Template.bind({});
WithPosition.args = {
  memori: {
    ...memori,
    needsPosition: true,
  },
  history,
  position: {
    placeName: 'Berlin',
    latitude: 52.520008,
    longitude: 13.404954,
  },
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: false,
  showShare: false,
  showSettings: false,
};

export const SpeakerMuted = Template.bind({});
SpeakerMuted.args = {
  memori,
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: true,
  hasUserActivatedSpeak: false,
  showShare: false,
  showSettings: false,
};

export const WithoutAudio = Template.bind({});
WithoutAudio.args = {
  memori,
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: true,
  enableAudio: false,
  hasUserActivatedSpeak: false,
  showShare: false,
  showSettings: false,
};

export const WithShare = Template.bind({});
WithShare.args = {
  memori,
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: false,
  showShare: true,
  showSettings: false,
};

export const WithSettings = Template.bind({});
WithSettings.args = {
  memori,
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: false,
  showShare: false,
  showSettings: true,
};

export const WithClear = Template.bind({});
WithClear.args = {
  memori,
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: false,
  showShare: false,
  showSettings: false,
  showClear: true,
};

export const WithOngoingChat = Template.bind({});
WithOngoingChat.args = {
  memori,
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: true,
  showShare: false,
  showSettings: false,
};

export const WithDeepThoughtEnabled = Template.bind({});
WithDeepThoughtEnabled.args = {
  memori: {
    ...memori,
    enableDeepThought: true,
  },
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: false,
  showShare: false,
  showSettings: false,
  loginToken: 'abcd',
};

export const WithDeepThoughtEnabledAndOngoingChat = Template.bind({});
WithDeepThoughtEnabledAndOngoingChat.args = {
  memori: {
    ...memori,
    enableDeepThought: true,
  },
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: true,
  showShare: false,
  showSettings: false,
  sessionID: '1234',
  loginToken: 'abcd',
};

export const ForBoardOfExperts = Template.bind({});
ForBoardOfExperts.args = {
  memori: {
    ...memori,
    enableBoardOfExperts: true,
  },
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  showExperts: true,
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: false,
  showShare: false,
  showSettings: false,
  loginToken: 'abcd',
};

export const ForBoardOfExpertsAndOngoingChat = Template.bind({});
ForBoardOfExpertsAndOngoingChat.args = {
  memori: {
    ...memori,
    enableBoardOfExperts: true,
  },
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  showExperts: true,
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: true,
  showShare: false,
  showSettings: false,
  sessionID: '1234',
  loginToken: 'abcd',
};

export const WithLogin = Template.bind({});
WithLogin.args = {
  memori,
  history,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: false,
  showLogin: true,
};

export const WithSustainabilityPopover = Template.bind({});
WithSustainabilityPopover.args = {
  memori,
  history: historyWithConsumption,
  setShowPositionDrawer: () => {},
  setShowSettingsDrawer: () => {},
  setShowChatHistoryDrawer: () => {},
  setShowKnownFactsDrawer: () => {},
  setShowExpertsDrawer: () => {},
  setShowLoginDrawer: () => {},
  clearHistory: () => {},
  speakerMuted: false,
  hasUserActivatedSpeak: true,
  showShare: false,
  showSettings: false,
  showMessageConsumption: true,
  apiClient: {
    backend: {},
  } as any,
};