import React from 'react';
import SprkTextInput from './SprkTextInput/SprkTextInput';
import SprkInput from './SprkInput/SprkInput';
import SprkLabel from './SprkLabel/SprkLabel';
import { markdownDocumentationLinkBuilder } from '../../../../storybook-utilities/markdownDocumentationLinkBuilder';

export default {
  title: 'Components/Input/Search',
  decorators: [(story) => <div className="sprk-o-Box">{story()}</div>],
  component: SprkInput,
  parameters: {
    jest: ['SprkErrorContainer', 'SprkInputIconCheck'],
    info: `${markdownDocumentationLinkBuilder('input')}`,
  },
};

export const searchInput = () => (
  <>
    <SprkLabel isHidden>Text Input Label</SprkLabel>
    <SprkInput
      additionalClasses="sprk-b-TextInput--has-svg-icon"
      type="search"
      placeholder="Search"
    />
  </>
);

searchInput.story = {
  name: 'Default',
  parameters: {
    jest: ['SprkInput', 'SprkLabel'],
  },
};

export const invalidSearchInput = () => (
  <>
    <SprkLabel isHidden>Text Input Label</SprkLabel>
    <SprkInput
      additionalClasses="sprk-b-TextInput--has-svg-icon"
      type="search"
      placeholder="Search"
      isValid={false}
    />
  </>
);

invalidSearchInput.story = {
  name: 'Invalid',
  parameters: {
    jest: ['SprkInput', 'SprkLabel'],
  },
};

export const disabledSearchInput = () => (
  <>
    <SprkLabel isHidden isDisabled>
      Text Input Label
    </SprkLabel>
    <SprkInput
      additionalClasses="sprk-b-TextInput--has-svg-icon"
      type="search"
      placeholder="Search"
      isDisabled
    />
  </>
);

disabledSearchInput.story = {
  name: 'Disabled',
  parameters: {
    jest: ['SprkInput', 'SprkLabel'],
  },
};

export const legacySearchInput = () => (
  <SprkTextInput
    type="search"
    leadingIcon="search"
    hiddenLabel
    name="InlineSearch"
    placeholder="Search"
  />
);

legacySearchInput.story = {
  name: 'Legacy (Deprecated)',
  parameters: {
    jest: ['SprkTextInput'],
  },
};

export const legacyInvalidSearchInput = () => (
  <SprkTextInput
    type="search"
    leadingIcon="search"
    hiddenLabel
    name="InlineSearch"
    placeholder="Search"
    valid={false}
    errorMessage="There is an error on this field."
  />
);

legacyInvalidSearchInput.story = {
  name: 'Legacy Invalid (Deprecated)',
  parameters: {
    jest: ['SprkTextInput'],
  },
};

export const legacyDisabledSearchInput = () => (
  <SprkTextInput
    type="search"
    leadingIcon="search"
    hiddenLabel
    name="InlineSearch"
    placeholder="Search"
    disabled
  />
);

legacyDisabledSearchInput.story = {
  name: 'Legacy Disabled (Deprecated)',
  parameters: {
    jest: ['SprkTextInput'],
  },
};

@@ -173,16 +173,164 @@
 Label';%0A
+import SprkInputContainer from './SprkInputContainer/SprkInputContainer';%0Aimport SprkErrorContainer from './SprkErrorContainer/SprkErrorContainer';%0A
 import %7B
@@ -757,32 +757,50 @@
 ut = () =%3E (%0A  %3C
+SprkInputContainer
 %3E%0A    %3CSprkLabel
@@ -964,24 +964,42 @@
 %0A    /%3E%0A  %3C/
+SprkInputContainer
 %3E%0A);%0A%0Asearch
@@ -1076,32 +1076,54 @@
 ut', 'SprkLabel'
+, 'SprkInputContainer'
 %5D,%0A  %7D,%0A%7D;%0A%0Aexpo
@@ -1155,32 +1155,50 @@
 ut = () =%3E (%0A  %3C
+SprkInputContainer
 %3E%0A    %3CSprkLabel
@@ -1382,26 +1382,228 @@
 e%7D%0A    /%3E%0A  
-%3C/
+  %3CSprkErrorContainer%0A      id=%22invalid-search%22%0A      message=%22Update this story once error container is done%22%0A    %3E%0A      There is an error on this field.%0A    %3C/SprkErrorContainer%3E%0A  %3C/SprkInputContainer
 %3E%0A);%0A%0Ainvali
@@ -1663,32 +1663,39 @@
 s: %7B%0A    jest: %5B
+%0A      
 'SprkInput', 'Sp
@@ -1682,32 +1682,38 @@
     'SprkInput',
+%0A     
  'SprkLabel'%5D,%0A 
@@ -1700,32 +1700,94 @@
      'SprkLabel'
+,%0A      'SprkInputContainer',%0A      'SprkErrorContainer',%0A    
 %5D,%0A  %7D,%0A%7D;%0A%0Aexpo
@@ -1828,16 +1828,34 @@
 =%3E (%0A  %3C
+SprkInputContainer
 %3E%0A    %3CS
@@ -2071,16 +2071,34 @@
  /%3E%0A  %3C/
+SprkInputContainer
 %3E%0A);%0A%0Adi
@@ -2196,16 +2196,38 @@
 rkLabel'
+, 'SprkInputContainer'
 %5D,%0A  %7D,%0A

add containers to search