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/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 = () => (
  <>
    <SprkLabel>Phone Number</SprkLabel>
    <SprkInput placeholder="(000) 000-0000" />
  </>
);

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

export const invalidPhoneInput = () => (
  <>
    <SprkLabel>Phone Number</SprkLabel>
    <SprkInput placeholder="(000) 000-0000" isValid={false} />
  </>
);

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

export const disabledPhoneInput = () => (
  <>
    <SprkLabel isDisabled>Phone Number</SprkLabel>
    <SprkInput placeholder="(000) 000-0000" isDisabled />
  </>
);

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

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'],
  },
};

@@ -173,16 +173,164 @@
 Label';%0A
+import SprkInputContainer from './SprkInputContainer/SprkInputContainer';%0Aimport SprkErrorContainer from './SprkErrorContainer/SprkErrorContainer';%0A
 import %7B
@@ -1362,17 +1362,16 @@
 d value.
- 
 %0A%60,%0A  %7D,
@@ -1404,32 +1404,50 @@
 ut = () =%3E (%0A  %3C
+SprkInputContainer
 %3E%0A    %3CSprkLabel
@@ -1519,24 +1519,42 @@
 000%22 /%3E%0A  %3C/
+SprkInputContainer
 %3E%0A);%0A%0AphoneI
@@ -1630,32 +1630,54 @@
 ut', 'SprkLabel'
+, 'SprkInputContainer'
 %5D,%0A  %7D,%0A%7D;%0A%0Aexpo
@@ -1708,32 +1708,50 @@
 ut = () =%3E (%0A  %3C
+SprkInputContainer
 %3E%0A    %3CSprkLabel
@@ -1837,26 +1837,226 @@
 false%7D /%3E%0A  
-%3C/
+  %3CSprkErrorContainer%0A      id=%22invalid-date%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
@@ -2115,32 +2115,39 @@
 s: %7B%0A    jest: %5B
+%0A      
 'SprkInput', 'Sp
@@ -2134,32 +2134,38 @@
     'SprkInput',
+%0A     
  'SprkLabel'%5D,%0A 
@@ -2152,32 +2152,94 @@
      'SprkLabel'
+,%0A      'SprkInputContainer',%0A      'SprkErrorContainer',%0A    
 %5D,%0A  %7D,%0A%7D;%0A%0Aexpo
@@ -2279,16 +2279,34 @@
 =%3E (%0A  %3C
+SprkInputContainer
 %3E%0A    %3CS
@@ -2412,16 +2412,34 @@
  /%3E%0A  %3C/
+SprkInputContainer
 %3E%0A);%0A%0Adi
@@ -2536,16 +2536,38 @@
 rkLabel'
+, 'SprkInputContainer'
 %5D,%0A  %7D,%0A

add containers to phone