import React from 'react';
import { Meta, Story } from '@storybook/react';
import { sessionID } from '../../mocks/data';
import I18nWrapper from '../../I18nWrapper';
import WhyThisAnswer, { Props } from './WhyThisAnswer';
import { SearchMatches } from '@memori.ai/memori-api-client/dist/types';
import memoriApiClient from '@memori.ai/memori-api-client';

import './WhyThisAnswer.css';

const meta: Meta = {
  title: 'Why This Answer',
  component: WhyThisAnswer,
  argTypes: {
    visible: {
      control: {
        type: 'boolean',
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template: Story<Props> = args => (
  <I18nWrapper>
    <WhyThisAnswer
      {...args}
      client={memoriApiClient()}
      sessionID={sessionID}
      message={{
        questionAnswered: 'Test message',
        text: 'This is a test content',
        date: '2021-01-01',
        placeName: 'Test Place',
        placeLatitude: 0,
        placeLongitude: 0,
        placeUncertaintyKm: 0,
        contextVars: {
          KEY: 'value',
        },
      }}
      closeDrawer={() => {}}
    />
  </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 = {
  visible: true,
};

export const Loading = Template.bind({});
Loading.args = {
  visible: true,
  _TEST_loading: true,
};

export const WithDocumentTagsInQuestion = Template.bind({});
WithDocumentTagsInQuestion.args = {
  visible: true,
  initialMatches: [
    {
      confidence: 0.9,
      confidenceLevel: 'HIGH',
      memory: {
        memoryID: 'tag-1',
        memoryType: 'Question',
        title: 'Question with tags',
        answers: [{ text: 'Clean answer' }],
      },
    } as SearchMatches,
  ],
};
WithDocumentTagsInQuestion.decorators = [
  (Story: any) => (
    <I18nWrapper>
      <WhyThisAnswer
        visible
        client={memoriApiClient()}
        sessionID={sessionID}
        message={{
          questionAnswered:
            '<documents><document name="note.md">What is the new UI?</document></documents>\n<attachment_source>https://assets-staging.memori.ai/api/v2/asset/abc.md</attachment_source>\nhttps://assets-staging.memori.ai/api/v2/asset/def.txt',
          text: 'Answer text',
          date: '2021-01-01',
        }}
        closeDrawer={() => {}}
        initialMatches={[
          {
            confidence: 0.9,
            confidenceLevel: 'HIGH',
            memory: {
              memoryID: 'tag-1',
              memoryType: 'Question',
              title: 'Question with tags',
              answers: [{ text: 'Clean answer' }],
            },
          } as SearchMatches,
        ]}
      />
    </I18nWrapper>
  ),
];
WithDocumentTagsInQuestion.parameters = {
  docs: {
    description: {
      story:
        'The user question (questionAnswered) contains <documents>, <attachment_source> tags and bare asset URLs. All should be stripped from the displayed question.',
    },
  },
};

export const WithDocumentTagsInAnswers = Template.bind({});
WithDocumentTagsInAnswers.args = {
  visible: true,
  initialMatches: [
    {
      confidence: 0.85,
      confidenceLevel: 'HIGH',
      memory: {
        memoryID: 'tag-2',
        memoryType: 'Question',
        title: 'Memory with tagged answer',
        answers: [
          {
            text: '<documents><document name="ref.md">The actual answer content</document></documents>\n<attachment_link>https://assets-staging.memori.ai/api/v2/asset/xyz.txt</attachment_link>\nhttps://assets-staging.memori.ai/api/v2/asset/other.md',
          },
        ],
      },
    } as SearchMatches,
  ],
};
WithDocumentTagsInAnswers.parameters = {
  docs: {
    description: {
      story:
        'A memory answer (a.text) contains document/attachment tags and asset URLs. These should be stripped from the displayed answer text.',
    },
  },
};

export const WithData = Template.bind({});
WithData.args = {
  visible: true,
  initialMatches: [
    {
      confidence: 0.8,
      confidenceLevel: 'HIGH',
      memory: {
        memoryID: '1',
        memoryType: 'Question',
        title: 'This is the title of the content',
        titleVariants: [
          "This is a variant of the content's title",
          'This is a test content',
        ],
        answers: [
          {
            text: 'This is a test answer',
          },
          {
            text: 'This is another answer',
          },
        ],
      },
    } as SearchMatches,
    {
      confidence: 0.5,
      confidenceLevel: 'LOW',
      memory: {
        memoryID: '2',
        memoryType: 'Question',
        title: 'Content with a long answer',
        titleVariants: undefined,
        answers: [
          {
            text: 'Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.',
          },
        ],
      },
    } as SearchMatches,
    {
      confidence: 0.5,
      confidenceLevel: 'LOW',
      memory: {
        memoryID: '3',
        title: 'Content with sources',
        titleVariants: undefined,
        memoryType: 'Question',
        answers: [
          {
            text: 'This is a test answer',
          },
        ],
        media: [
          {
            mediumID: '1',
            mimeType: 'text/plain',
            content:
              'This is a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a sodales nulla, sed semper nisi. Suspendisse a sodales nulla, sed semper nisi.',
          },
          {
            mediumID: '2',
            mimeType: 'text/plain',
            content:
              'This is a source.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\nCras lobortis volutpat nunc.\nProin tincidunt enim in felis aliquet, a ultricies purus bibendum.\n\nQuisque in ultrices lectus.\nNulla at urna diam.\n\nProin sodales lobortis libero eu facilisis.',
          },
        ],
      },
    } as SearchMatches,
    {
      confidence: 0.7,
      confidenceLevel: 'MEDIUM',
      memory: {
        memoryID: '4',
        title: 'Content with links',
        memoryType: 'Question',
        titleVariants: undefined,
        answers: [
          {
            text: 'This is a an answer',
          },
        ],
        media: [
          {
            mediumID: '1',
            mimeType: 'text/html',
            url: 'https://memori.ai',
            title: 'Memori.AI',
          },
          {
            mediumID: '2',
            mimeType: 'text/html',
            url: 'https://nzambello.dev',
            title: 'Nicola Zambello',
          },
        ],
      },
    } as SearchMatches,
    {
      confidence: 0.7,
      confidenceLevel: 'MEDIUM',
      memory: {
        memoryID: '5',
        memoryType: 'Question',
        title: 'Content with receiver',
        titleVariants: undefined,
        receiverName: 'receiver',
        receiverTag: '🧑‍💻',
        answers: [
          {
            text: 'This is a an answer',
          },
        ],
        media: [],
      },
    } as SearchMatches,
    {
      confidence: 0.5,
      confidenceLevel: 'MEDIUM',
      memory: {
        memoryID: '5',
        memoryType: 'Question',
        title: 'Content with context',
        titleVariants: undefined,
        contextVars: {
          KEY1: 'VALUE1',
          KEY2: 'VALUE2',
        },
        answers: [
          {
            text: 'This is a an answer',
          },
        ],
        media: [],
      },
    } as SearchMatches,
  ],
};