import PropTypes from 'prop-types'
import React, {useState} from 'react'
import { FormattedMessage } from 'react-intl'

import FormNavigationButtons from './form-navigation-buttons'
import { PageHeading, StackedPaneContainer } from './styled'

/**
 * This component handles the flow between screens for new OTP user accounts.
 */
const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => {
  // Create indicator of if cancel button was clicked so that child components can know
  const [isBeingCanceled, updateBeingCanceled] = useState(false)

  return (
    <>
      {title && <PageHeading>{title}</PageHeading>}
      {paneSequence.map(({ hidden, pane: Pane, props, title }, index) => !hidden && (
        <StackedPaneContainer key={index}>
          <h3>{title}</h3>
          <div>
            <Pane canceled={isBeingCanceled} {...props} />
          </div>
        </StackedPaneContainer>
      ))}

      <FormNavigationButtons
        backButton={{
          onClick: () => {
            updateBeingCanceled(true)
            onCancel()
          },
          text: <FormattedMessage id='common.forms.cancel' />
        }}
        okayButton={{
          text: <FormattedMessage id='components.StackedPaneDisplay.savePreferences' />,
          type: 'submit'
        }}
      />
    </>
  )
}

StackedPaneDisplay.propTypes = {
  onCancel: PropTypes.func.isRequired,
  paneSequence: PropTypes.array.isRequired
}

export default StackedPaneDisplay

@@ -1,12 +1,58 @@
+import %7B FormattedMessage %7D from 'react-intl'%0A
 import PropT
@@ -89,24 +89,25 @@
 React, %7B
+ 
 useState
 %7D from '
@@ -98,16 +98,17 @@
 useState
+ 
 %7D from '
@@ -114,16 +114,17 @@
 'react'%0A
+%0A
 import %7B
@@ -128,45 +128,59 @@
 t %7B 
-FormattedMessage %7D from 'react-intl'%0A
+PageHeading, StackedPaneContainer %7D from './styled'
 %0Aimp
@@ -241,69 +241,8 @@
 ons'
-%0Aimport %7B PageHeading, StackedPaneContainer %7D from './styled'
 %0A%0A/*
@@ -323,17 +323,139 @@
 unts.%0A *
-/
+%0A * TODO: add types once Pane type exists%0A */%0A// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 %0Aconst S
@@ -763,16 +763,25 @@
 nce.map(
+%0A        
 (%7B hidde
@@ -820,16 +820,26 @@
 ndex) =%3E
+%0A         
  !hidden
@@ -852,16 +852,20 @@
         
+   
+ 
 %3CStacked
@@ -901,16 +901,20 @@
         
+    
 %3Ch3%3E%7Btit
@@ -932,16 +932,20 @@
         
+    
 %3Cdiv%3E%0A  
@@ -954,16 +954,20 @@
         
+  
+  
 %3CPane ca
@@ -1019,15 +1019,23 @@
     
+    
 %3C/div%3E%0A
+    
     
@@ -1068,17 +1068,28 @@
 %3E%0A      
+ 
-)
+   )%0A      
 )%7D%0A%0A    
@@ -1273,17 +1273,17 @@
 sage id=
-'
+%22
 common.f
@@ -1293,17 +1293,17 @@
 s.cancel
-'
+%22
  /%3E%0A    
@@ -1338,32 +1338,46 @@
 %0A          text:
+ (%0A           
  %3CFormattedMessa
@@ -1382,17 +1382,17 @@
 sage id=
-'
+%22
 componen
@@ -1432,12 +1432,24 @@
 nces
-'
+%22
  /%3E
+%0A          )
 ,%0A  
@@ -1620,16 +1620,43 @@
 Required
+,%0A  title: PropTypes.string
 %0A%7D%0A%0Aexpo

add typescript todos