import { componentName } from '../src/components/descope-code-snippet';
import { textContentControl } from './commonControls';

const textSamples = {
  html: `
  &lt;!-- HTML comment --&gt;

  &lt;div id=&quot;myId&quot; class=&quot;my-class&quot;&gt;
    &lt;p data-type=&quot;paragraph&quot;&gt;
      Snippet 1
    &lt;/p&gt;
    &lt;label for=&quot;myInput&quot;&gt;
      &lt;input id=&quot;myInput&quot; type=&quot;text&quot;/&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  `,
  xml: `
&lt;Response xmlns=&quot;urn:oasis:names:tc:SAML:2.0:protocol&quot; ID=&quot;id44273893780247019773985&quot; InResponseTo=&quot;_811889ea-3312-48b3-9cdd-02948193487d&quot; Destination=&quot;http://localhost:8000/v1/auth/saml/acs?projectId=P2gpW2KNAJabsOajsyop7MO6iMOL&amp;amp;tenantId=T2gzxO43zRDsvq9uMLmc7Ec0yBUS&quot; Version=&quot;2.0&quot; IssueInstant=&quot;2024-05-28T11:08:10.898Z&quot;&gt;
  &lt;Status xmlns=&quot;urn:oasis:names:tc:SAML:2.0:protocol&quot;&gt;
      &lt;StatusCode xmlns=&quot;urn:oasis:names:tc:SAML:2.0:protocol&quot; Value=&quot;urn:oasis:names:tc:SAML:2.0:status:Success&quot;&gt;&lt;/StatusCode&gt;
  &lt;/Status&gt;
  &lt;Issuer xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot;&gt;http://www.okta.com/exke4wdqfgKpAp5TN5d7&lt;/Issuer&gt;
  &lt;Assertion xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot; Version=&quot;2.0&quot; ID=&quot;id4427389379724851920862989&quot; IssueInstant=&quot;2024-05-28T11:08:10.898Z&quot;&gt;
      &lt;Issuer xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot;&gt;http://www.okta.com/exke4wdqfgKpAp5TN5d7&lt;/Issuer&gt;
      &lt;Subject xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot;&gt;
          &lt;NameID xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot;&gt;user@email.com&lt;/NameID&gt;
          &lt;SubjectConfirmation xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot; Method=&quot;urn:oasis:names:tc:SAML:2.0:cm:bearer&quot;&gt;
              &lt;SubjectConfirmationData xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot; NotOnOrAfter=&quot;2024-05-28T11:13:10.898Z&quot; Recipient=&quot;http://localhost:8000/v1/auth/saml/acs?projectId=P2gpW2KNAJabsOajsyop7MO6iMOL&amp;amp;tenantId=T2gzxO43zRDsvq9uMLmc7Ec0yBUS&quot; InResponseTo=&quot;_811889ea-3312-48b3-9cdd-02948193487d&quot;&gt;&lt;/SubjectConfirmationData&gt;
          &lt;/SubjectConfirmation&gt;
      &lt;/Subject&gt;
      &lt;Conditions xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot; NotBefore=&quot;2024-05-28T11:03:10.898Z&quot; NotOnOrAfter=&quot;2024-05-28T11:13:10.898Z&quot;&gt;
          &lt;AudienceRestriction xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot;&gt;
              &lt;Audience xmlns=&quot;urn:oasis:names:tc:SAML:2.0:assertion&quot;&gt;P2gpW2KNAJabsOajsyop7MO6iMOL-T2gzxO43zRDsvq9uMLmc7Ec0yBUS&lt;/Audience&gt;
          &lt;/AudienceRestriction&gt;
      &lt;/Conditions&gt;
  &lt;/Assertion&gt;
&lt;/Response&gt;
  `,
  css: `
/* CSS comment */

.my-class {
  background: lightgreen;
  border: 1px solid #000;
  padding: 1em;
  margin: 0.25em 0.25em;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
}
  `,
  javascript: `
  // JS comment 1
  /* JS comment 2 */

  const myObj = {
    p1: "bla1",
    p2: "bla2",
    p3: {
      q1: "fff"
    },
  };

  console.log('myObj', myObj);
`,
  json: `
{
  "xd": [
    {
      "id": "user@email.com-T2gzxO43zRDsvq9uMLmc7Ec0yBUS",
      "ty": "saml"
    }
  ],
  "nm": "Doron",
  "fn": "Doron",
  "em": "user@email.com",
  "vem": true,
  "vph": true,
  "ts": [
    "T2gzxO43zRDsvq9uMLmc7Ec0yBUS"
  ],
  "saml": true
}
  `,
};

const Template = ({ inline, lang, text, copyButton }) =>
  `
    <descope-code-snippet
      inline="${inline || false}"
      lang="${lang || ''}"
      copy-button="${copyButton || false}"
    >${text || textSamples[lang]}</descope-code-snippet>
  `;

export default {
  component: componentName,
  title: 'descope-code-snippet',
  argTypes: {
    ...textContentControl,
    lang: {
      name: 'lang',
      options: ['xml', 'html', 'css', 'javascript', 'json'],
      control: { type: 'select' },
    },
    copyButton: {
      name: 'copy-button',
      control: { type: 'boolean' },
    },
  },
};

export const Default = Template.bind({});

Default.args = {
  text: '',
  inline: false,
  lang: '',
  copyButton: false,
};
