import React from 'react';
import SprkTextInput from './SprkTextInput/SprkTextInput';
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/Phone',
  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
(parenthesis and -) 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 phone number pattern
  (###) ###-#### - After valid input, it
  should reformat to add commas and decimals
  to the hundredth place. Reformat user input
  with the \`formatter\` prop. This prop receives
  a function that takes the current value and returns
  the reformatted value.
`,
  },
};

export const phoneInput = () => (
  <SprkInputContainer>
    <SprkLabel>Phone Number</SprkLabel>
    <SprkInput
      placeholder="(000) 000-0000"
      additionalClasses="sprk-u-Width-100"
    />
  </SprkInputContainer>
);

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

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

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

export const disabledPhoneInput = () => (
  <SprkInputContainer>
    <SprkLabel isDisabled>Phone Number</SprkLabel>
    <SprkInput
      placeholder="(000) 000-0000"
      isDisabled
      additionalClasses="sprk-u-Width-100"
    />
  </SprkInputContainer>
);

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

export const legacyPhoneInput = () => (
  <SprkTextInput
    label="Phone Number"
    name="phone"
    placeholder="(000) 000-0000"
  />
);

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

export const legacyInvalidPhoneInput = () => (
  <SprkTextInput
    label="Phone Number"
    name="phone"
    placeholder="(000) 000-0000"
    valid={false}
    errorMessage="There is an error on this field."
  />
);

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

export const legacyDisabledPhoneInput = () => (
  <SprkTextInput
    label="Phone Number"
    name="phone"
    placeholder="(000) 000-0000"
    disabled
  />
);

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

@@ -262,68 +262,112 @@
 Sprk
-ErrorContainer from './SprkErrorContainer/SprkErrorContainer
+FieldError from './SprkFieldError/SprkFieldError';%0Aimport SprkIcon from '../../components/icons/SprkIcon
 ';%0Ai
@@ -667,44 +667,13 @@
 Sprk
-ErrorContainer', 'SprkInputIconCheck
+Input
 '%5D,%0A
@@ -1451,32 +1451,50 @@
 %3E%0A    %3CSprkLabel
+ htmlFor=%22phone-1%22
 %3EPhone Number%3C/S
@@ -1510,32 +1510,51 @@
 %0A    %3CSprkInput%0A
+      id=%22phone-1%22%0A
       placeholde
@@ -1853,16 +1853,34 @@
 prkLabel
+ htmlFor=%22phone-2%22
 %3EPhone N
@@ -1904,32 +1904,89 @@
 %0A    %3CSprkInput%0A
+      id=%22phone-2%22%0A      ariaDescribedBy=%22invalid-phone%22%0A
       placeholde
@@ -2089,28 +2089,18 @@
 Sprk
+Field
 Error
-Container%0A     
  id=
@@ -2112,89 +2112,164 @@
 lid-
-dat
+phon
 e%22
+%3E
 %0A      
-message=%22Update this story once e
+%3CSprkIcon%0A        iconName=%22exclamation-filled%22%0A        additionalClasses=%22sprk-b-E
 rror
- 
+I
 con
-tainer is done
 %22%0A
+  
     
+/
 %3E%0A     
+ 
- 
+%3Cdiv className=%22sprk-b-ErrorText%22%3E
 Ther
@@ -2296,16 +2296,22 @@
 s field.
+%3C/div%3E
 %0A    %3C/S
@@ -2313,29 +2313,25 @@
   %3C/Sprk
-ErrorContaine
+FieldErro
 r%3E%0A  %3C/S
@@ -2509,22 +2509,36 @@
 Sprk
-ErrorContainer
+FieldError',%0A      'SprkIcon
 ',%0A 
@@ -2631,16 +2631,34 @@
 prkLabel
+ htmlFor=%22phone-3%22
  isDisab
@@ -2661,16 +2661,23 @@
 isabled%3E
+%0A      
 Phone Nu
@@ -2672,32 +2672,37 @@
     Phone Number
+%0A    
 %3C/SprkLabel%3E%0A   
@@ -2709,24 +2709,43 @@
  %3CSprkInput%0A
+      id=%22phone-3%22%0A
       placeh

update phone stories