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

export default {
  title: 'Components/Input/SSN',
  decorators: [(story) => <div className="sprk-o-Box">{story()}</div>],
  component: SprkInput,
  parameters: {
    jest: ['SprkErrorContainer', 'SprkInputIconCheck'],
    info: `
${markdownDocumentationLinkBuilder('input')}
- The value of this field contains special characters
(-) which you may need to remove before submitting the form.
- Requires Additional Engineering:
  - Validation - The \`valid\` prop controls this input’s
  validation state. This boolean is determined by your
  own validation logic. Validation happens before reformatting.
  - Reformatting to SSN pattern (###-##-####) - After valid
  input, it should reformat to having the first three numbers,
  a dash, the next two numbers, a dash, and the last four
  numbers. Reformat user input with the \`formatter\` prop.
  This prop receives a function that takes the current value
  and returns the reformatted value.
`,
  },
};

export const SSNInput = () => (
  <SprkInputContainer>
    <SprkLabel>Social Security Number</SprkLabel>
    <SprkInput additionalClasses="sprk-u-Width-100" />
  </SprkInputContainer>
);

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

export const invalidSSNInput = () => (
  <SprkInputContainer>
    <SprkLabel>Social Security Number</SprkLabel>
    <SprkInput isValid={false} additionalClasses="sprk-u-Width-100" />
    <SprkErrorContainer
      id="invalid-ssn"
      message="Update this story once error container is done"
    >
      There is an error on this field.
    </SprkErrorContainer>
  </SprkInputContainer>
);

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

export const disabledSSNInput = () => (
  <SprkInputContainer>
    <SprkLabel isDisabled>Social Security Number</SprkLabel>
    <SprkInput isDisabled additionalClasses="sprk-u-Width-100" />
  </SprkInputContainer>
);

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

export const legacySSNInput = () => (
  <SprkRevealInput
    label="Social Security Number"
    toggleLabel="Show SSN"
    name="ssn"
  />
);

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

export const legacyInvalidSSNInput = () => (
  <SprkRevealInput
    label="Social Security Number"
    toggleLabel="Show SSN"
    name="ssn"
    valid={false}
    errorMessage="There is an error on this field."
  />
);

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

export const legacyDisabledSSNInput = () => (
  <SprkRevealInput
    label="Social Security Number"
    toggleLabel="Show SSN"
    name="ssn"
    disabled
  />
);

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

@@ -268,68 +268,112 @@
 Sprk
-ErrorContainer from './SprkErrorContainer/SprkErrorContainer
+FieldError from './SprkFieldError/SprkFieldError';%0Aimport SprkIcon from '../../components/icons/SprkIcon
 ';%0Ai
@@ -671,44 +671,13 @@
 Sprk
-ErrorContainer', 'SprkInputIconCheck
+Input
 '%5D,%0A
@@ -1472,32 +1472,48 @@
 %3E%0A    %3CSprkLabel
+ htmlFor=%22ssn-1%22
 %3ESocial Security
@@ -1546,16 +1546,27 @@
 prkInput
+ id=%22ssn-1%22
  additio
@@ -1825,16 +1825,32 @@
 prkLabel
+ htmlFor=%22ssn-2%22
 %3ESocial 
@@ -1891,16 +1891,75 @@
 prkInput
+%0A      id=%22ssn-2%22%0A      ariaDescribedBy=%22invalid-ssn%22%0A     
  isValid
@@ -1966,16 +1966,22 @@
 =%7Bfalse%7D
+%0A     
  additio
@@ -2005,24 +2005,28 @@
 u-Width-100%22
+%0A   
  /%3E%0A    %3CSpr
@@ -2030,28 +2030,18 @@
 Sprk
+Field
 Error
-Container%0A     
  id=
@@ -2057,84 +2057,124 @@
 ssn%22
+%3E
 %0A      
-message=%22Update this story once error container is d
+%3CSprkIcon%0A        iconName=%22exclamation-filled%22%0A        additionalClasses=%22sprk-b-ErrorIc
 on
-e
 %22%0A    
+  /
 %3E%0A      
 Ther
@@ -2169,16 +2169,50 @@
 %3E%0A      
+%3Cdiv className=%22sprk-b-ErrorText%22%3E
 There is
@@ -2235,16 +2235,22 @@
 s field.
+%3C/div%3E
 %0A    %3C/S
@@ -2252,29 +2252,25 @@
   %3C/Sprk
-ErrorContaine
+FieldErro
 r%3E%0A  %3C/S
@@ -2446,22 +2446,36 @@
 Sprk
-ErrorContainer
+FieldError',%0A      'SprkIcon
 ',%0A 
@@ -2577,17 +2577,40 @@
 Disabled
-%3E
+ htmlFor=%22ssn-3%22%3E%0A      
 Social S
@@ -2615,32 +2615,37 @@
  Security Number
+%0A    
 %3C/SprkLabel%3E%0A   
@@ -2655,16 +2655,27 @@
 prkInput
+ id=%22ssn-3%22
  isDisab

update ssn stories