import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
import { boolean, select, text } from '@storybook/addon-knobs'
import MessageCard from './'
import { MessageCardStoryWrapperUI } from './MessageCard.storiesHelper'
import {
  EmojiSurvey,
  FacesSurvey,
  MultipleChoiceSurvey,
  ThumbsSurvey,
} from './MessageCard.Survey.variants'
import { ThemeProvider } from 'styled-components'
import { makeBrandColors } from '../../styles/utilities/color'

<Meta
  title="Components/Conversation/Message/MessageCard"
  component={MessageCard}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=2582%3A7771',
    },
    knobs: {
      escapeHTML: false,
    },
  }}
/>

# MessageCard

This component renders a Message Card Notification with (optional) Title, Subtitle, Body, and Action props.

<Canvas>
  <Story name="default">
    <MessageCardStoryWrapperUI>
      <MessageCard
        key="default"
        in={boolean('show', true)}
        isMobile={boolean('isMobile', false)}
        isWithBoxShadow={boolean('isWithBoxShadow', true)}
        withAnimation={true}
        align={select('Align', { Right: 'right', Left: 'left' }, 'right')}
        subtitle={text('Subtitle', 'The J&G Team is here')}
        title={text('Title', 'Need help?')}
        body={text(
          'Body',
          '<p>This <i>sentence</i> has five <u>words</u>. has five more <code class="inline-code">words</code></p><ul> <li>Point one</li><li>Somewhat unimaginatively , I&#39;ve <s>compartmentalized</s> my incomprehensibilities. Furthermore, announcements of such long-windedness are likely un-copyrightable!</li><li>Text</li></ul><p>Hol’ up, here comes a blockquote. Thanks,</p><blockquote> <p>This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety. Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences</p></blockquote><p><b>Bold text</b> is charcoal.800 whist links are <a href="https://www.google.com/">blue.600</a></p><ol> <li>Point one</li><li>Point two is made up of two lines, of course list items can extend well beyond this, but still respect the grid</li><li>Text</li></ol><pre><code><p>let settings = HSBeaconSettings(beaconId: "cac8be08-60a3 -46e8-b22e-ed50bfcaa0aa"); HSBeacon.open(settings);</p></code></pre><p>The J&amp;G Support Team are always happy.</p>'
        )}
        action={() => <MessageCard.Button>Click here</MessageCard.Button>}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# with body scrollbar

<Canvas>
  <Story name="with scrollbar">
    <MessageCardStoryWrapperUI>
      <MessageCard
        key="default"
        in={boolean('show', true)}
        isMobile={boolean('isMobile', false)}
        isWithBoxShadow={boolean('isWithBoxShadow', true)}
        withAnimation={true}
        align={select('Align', { Right: 'right', Left: 'left' }, 'right')}
        subtitle={text('Subtitle', 'The J&G Team is here')}
        title={text('Title', 'Need help?')}
        body={text(
          'Body',
          '<p>This <i>sentence</i> has five <u>words</u>. has five more <code class="inline-code">words</code></p><ul> <li>Point one</li><li>Somewhat unimaginatively , I&#39;ve <s>compartmentalized</s> my incomprehensibilities. Furthermore, announcements of such long-windedness are likely un-copyrightable!</li><li>Text</li></ul><p>Hol’ up, here comes a blockquote. Thanks,</p><blockquote> <p>This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety. Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences</p></blockquote><p><b>Bold text</b> is charcoal.800 whist links are <a href="https://www.google.com/">blue.600</a></p><ol> <li>Point one</li><li>Point two is made up of two lines, of course list items can extend well beyond this, but still respect the grid</li><li>Text</li></ol><pre><code><p>let settings = HSBeaconSettings(beaconId: "cac8be08-60a3 -46e8-b22e-ed50bfcaa0aa"); HSBeacon.open(settings);</p></code></pre><p>The J&amp;G Support Team are always happy.</p>'
        )}
        image={{
          height: '700',
          width: '1050',
          url:
            'https://images.unsplash.com/photo-1620607812709-f7c4a88baf11?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
        }}
        action={() => <MessageCard.Button>Click here</MessageCard.Button>}
        style={{ height: '600px' }}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With image

<Canvas>
  <Story name="With image">
    <MessageCardStoryWrapperUI>
      <MessageCard
        key="with-image"
        in={boolean('show', true)}
        isMobile={boolean('isMobile', false)}
        isWithBoxShadow={boolean('isWithBoxShadow', true)}
        withAnimation={true}
        subtitle={text('Subtitle', 'The J&G Team is here')}
        title={text('Title', 'Need help?')}
        image={{
          height: '700',
          width: '1050',
          url:
            'https://images.unsplash.com/photo-1620607812709-f7c4a88baf11?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
        }}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With image and action

<Canvas>
  <Story name="With image and action">
    <MessageCardStoryWrapperUI>
      <MessageCard
        subtitle={text('Subtitle', 'The J&G Team is here')}
        title={text('Title', 'Need help?')}
        body={text(
          'Body',
          '<p>This <i>sentence</i> has five <u>words</u>. </p>'
        )}
        image={{
          height: '700',
          width: '1050',
          url:
            'https://images.unsplash.com/photo-1620607812709-f7c4a88baf11?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
        }}
        action={() => <MessageCard.Button>Click here</MessageCard.Button>}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With attachment

<Canvas>
  <Story name="With attachment">
    <MessageCardStoryWrapperUI>
      <div style={{ width: '300px' }}>
        <MessageCard
          subtitle={text('Subtitle', 'The J&G Team is here')}
          title={text('Title', 'Need help?')}
          body={text(
            'Body',
            '<p>This <i>sentence</i> has five <u>words</u>. </p>'
          )}
          image={{
            height: '700',
            width: '1050',
            url:
              'https://images.unsplash.com/photo-1620607812709-f7c4a88baf11?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
          }}
          action={() => <MessageCard.Button>Click here</MessageCard.Button>}
        />
        <MessageCard.ArticleCard
          onClick={() => {}}
          title="Attachment"
          content="Some content for attachment"
          footer={
            <MessageCard.UrlAttachmentImage url="https://images.unsplash.com/photo-1620607812709-f7c4a88baf11?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
          }
          contentLimit={201}
        />
      </div>
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With variables

<Canvas>
  <Story name="With variables">
    <MessageCardStoryWrapperUI>
      <MessageCard
        subtitle={text('Subtitle', 'The J&G Team is here')}
        title={text('Title', 'Need help?')}
        body={text(
          'Body',
          '<p>Hi {%customer.firstName,fallback=there%}!</p> <p>This <i>sentence</i> has five <u>words</u>. </p>' +
            ' <p>See you at our <b>amazing show with {%coordinator,fallback=Coordinator%}</b>!</p>' +
            ' <p>It would happen at {%date%}</p> <p>And this is non-existing variable {%nonExisting,fallback=no%}</p>' +
            ' <p>Long variable {%coordinator,fallback=Some quite very very long variable fallback%}</p>'
        )}
        variables={[
          { id: 'customer.firstName', display: 'First Name' },
          { id: 'coordinator', display: 'Person' },
          { id: 'date', display: 'Date' },
        ]}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With Thumbs survey

<Canvas>
  <Story name="With Thumbs survey">
    <MessageCardStoryWrapperUI>
      <MessageCard
        title="How did you feel about your checkout experience?"
        body="Your feedback is valuable to us. Let us know how we did so we can continue to improve our services."
        action={() => (
          <MessageCard.Survey
            withFeedbackForm
            feedbackFormText="Tell us more..."
            onSubmit={data => console.log(data)}
            withShowFeedbackFormDelay
          >
            <ThumbsSurvey />
          </MessageCard.Survey>
        )}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With Faces survey

<Canvas>
  <Story name="With Faces survey">
    <MessageCardStoryWrapperUI>
      <MessageCard
        title="How did you feel about your checkout experience?"
        body="Your feedback is valuable to us. Let us know how we did so we can continue to improve our services."
        action={() => (
          <ThemeProvider theme={{ brandColor: makeBrandColors('#8c3c4a') }}>
            <MessageCard.Survey
              withFeedbackForm
              feedbackFormText="Tell us more..."
              submitButtonText="Send with some long button text"
              onSubmit={data => console.log(data)}
              withShowFeedbackFormDelay
            >
              <FacesSurvey />
            </MessageCard.Survey>
          </ThemeProvider>
        )}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With Emoji survey

<Canvas>
  <Story name="With Emoji survey">
    <MessageCardStoryWrapperUI>
      <MessageCard
        title="How did you feel about your checkout experience?"
        body="Your feedback is valuable to us. Let us know how we did so we can continue to improve our services."
        action={() => (
          <ThemeProvider theme={{ brandColor: makeBrandColors('#5c8c3c') }}>
            <MessageCard.Survey
              withFeedbackForm
              feedbackFormText="Tell us more..."
              submitButtonText="Send with some long button text"
              onSubmit={data => console.log(data)}
              withShowFeedbackFormDelay
            >
              <EmojiSurvey
                emojis={[
                  {
                    id: '+1',
                    name: 'Thumbs Up',
                    unicode: '1f44d',
                  },
                  {
                    id: '100',
                    name: 'Hundred Points',
                    unicode: '1f4af',
                  },
                  {
                    id: 'sunglasses',
                    name: 'Sunglasses',
                    unicode: '1f60e',
                    native: '😎',
                  },
                ]}
              />
            </MessageCard.Survey>
          </ThemeProvider>
        )}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With Multiple Choice survey

<Canvas>
  <Story name="With Multiple Choice survey">
    <MessageCardStoryWrapperUI>
      <MessageCard
        title="Which pizza do you like the most?"
        body="Your feedback is valuable to us. Let us know how we did so we can continue to improve our services."
        action={() => (
          <MessageCard.Survey
            withFeedbackForm
            feedbackFormText="Tell us more..."
            onSubmit={data => console.log(data)}
          >
            <MultipleChoiceSurvey
              choices={[
                { id: '1', text: 'Pepperoni' },
                { id: '2', text: 'With pineapple of course!' },
                { id: '3', text: 'Classic margherita' },
                { id: '4', text: 'Veggie option' },
                { id: '5', text: 'My favorite with all ingredients' },
              ]}
            />
          </MessageCard.Survey>
        )}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With Text survey

<Canvas>
  <Story name="With Text survey">
    <MessageCardStoryWrapperUI>
      <MessageCard
        title="Which pizza do you like the most?"
        body="Your feedback is valuable to us. Let us know how we did so we can continue to improve our services."
        action={() => (
          <MessageCard.Survey
            isTextOnlySurvey
            feedbackFormText="Tell us more..."
            onSubmit={data => console.log(data)}
          />
        )}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With video

<Canvas>
  <Story name="With video">
    <MessageCardStoryWrapperUI>
      <MessageCard
        key="with-video"
        in={boolean('show', true)}
        isMobile={boolean('isMobile', false)}
        isWithBoxShadow={boolean('isWithBoxShadow', true)}
        withAnimation={true}
        subtitle={text('Subtitle', 'The J&G Team is here')}
        title={text('Title', 'Need help?')}
        video={{
          html:
            '<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/YB-slq0hqWw?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe></div>',
        }}
        action={() => <MessageCard.Button>Click here</MessageCard.Button>}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

# With iframely video

<Canvas>
  <Story name="With iframely video url">
    <MessageCardStoryWrapperUI>
      <MessageCard
        key="with-iframely-video"
        in={boolean('show', true)}
        isMobile={boolean('isMobile', false)}
        isWithBoxShadow={boolean('isWithBoxShadow', true)}
        withAnimation={true}
        subtitle={text('Subtitle', 'The J&G Team is here')}
        title={text('Title', 'Need help?')}
        video={{
          html:
            '<div><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DYB-slq0hqWw&key=32d974fdab1b804ff90cbd07d257baba" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *;"></iframe></div></div>',
        }}
        action={() => <MessageCard.Button>Click here</MessageCard.Button>}
      />
    </MessageCardStoryWrapperUI>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Beacon2, ChatApp

<br />
<br />

### Props

<ArgsTable of={MessageCard} />
