#Dropdown

const data = [
  // Every data item can, beside "content" - contain what ever
  {
    // (optional) can be what ever
    selected_key: 'key_0',

    // (optional) is show instead of "content", once selected
    selected_value: 'Item 1 Value',

    // Item content as a string or array
    content: 'Item 1 Content'
  },
  {
    selected_key: 'key_1',
    content: ['Item 2 Value', 'Item 2 Content']
  },
  {
    selected_value: <NumberFormat always_selectall ban>11345678962</NumberFormat>,
    content: [<NumberFormat always_selectall ban>11345678962</NumberFormat>, 'Bank account number']
  },
  {
    selected_key: 'key_2',
    selected_value: 'Item 3 Value',
    content: [
      'Item 3 Content A',
      'Item 3 Content B'
    ]
  },
  {
    selected_key: 'key_3',
    selected_value: 'Item 4 Value',
    content: ['Item 4 Content A', <>Custom Component</>]
  }
];
render(
  <Dropdown
    data={data}
    label="Label:"
    title="Please select a value"
    on_change={({ data }) => {
      console.log('on_change', data)
    }}
  />
)

<Dropdown
  label="Label:"
  data={[
    ['Vertical', 'alignment'],
    <>
      <P modifier="medium">Vertical</P>
      <P>alignment</P>
    </>,
    <Dropdown.HorizontalItem key="item-1">
      <P modifier="medium" right="x-small">
        Horizontal
      </P>
      <P>alignment</P>
    </Dropdown.HorizontalItem>,
  ]}
/>

<Dropdown
  label="Label:"
  icon_position="left"
  data={data}
  value={3}
  skip_portal={true}
  on_change={({ data: selectedDataItem }) => {
    console.log('on_change', selectedDataItem)
  }}
  on_show={() => {
    console.log('on_show')
  }}
/>

<Dropdown
  title="ActionMenu"
  action_menu={true}
  align_dropdown="left"
  data={[
    <>
      <IconPrimary icon="check" right />
      Save
    </>,
    <>
      <IconPrimary icon="download" right />
      Download
    </>
  ]}
/>

<Dropdown
  more_menu="true"
  size="small"
  title="Choose an item"
  data={() => [<Link href="/" key="item-1">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
  right="small"
/>
<Dropdown
  prevent_selection="true"
  align_dropdown="right"
  size="small"
  title={null}
  aria-label="Choose an item"
  data={() => [<Link href="/" key="item-1">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
  right="small"
/>
<Dropdown
  more_menu="true"
  title="Choose an item"
  data={[<Link href="/" key="item-1">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
  right="small"
/>
<Dropdown
  prevent_selection="true"
  align_dropdown="right"
  title={null}
  aria-label="Choose an item"
  data={[<Link href="/" key="item-1">Go to this Link</Link>, 'Or press on me', <>Custom component</>]}
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
  on_select={({ active_item }) => {
    console.log('on_select', active_item)
  }}
/>

<Dropdown
  variant="tertiary"
  independent_width={true}
  icon_position="left"
  align_dropdown="left"
  data={data}
/>

const CustomComponent = () => (
  <CustomComponentInner
    onTouchStart={preventDefault}
    onClick={e => {
      console.log('Do something different')
      preventDefault(e)
    }}
  >
    Custom event handler
  </CustomComponentInner>
)
const CustomComponentInner = styled.span`
  display: block;
  width: 100%;
  margin: -1rem -2rem -1rem -1rem;
  padding: 1rem 2rem 1rem 1rem;
`
const preventDefault = e => {
  e.stopPropagation()
  e.preventDefault()
}
render(
  <Dropdown
    action_menu
    right
    label="Label:"
    title="Choose an item"
    data={() => [
      <Link href="/" key="item-1">Go to this Link</Link>,
      'Or press on me',
      <CustomComponent />
    ]}
    on_change={({ value }) => {
      console.log('More menu:', value)
    }}
    suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
  />
)

<FormRow direction="vertical">
  <Dropdown
    label="Label:"
    size="default"
    bottom
    data={() => (data)}
  />
  <Dropdown
    label="Label:"
    size="medium"
    bottom
    data={() => (data)}
  />
  <Dropdown
    label="Label:"
    size="large"
    bottom
    data={() => (data)}
  />
</FormRow>

const CustomWidthOne = styled(Dropdown)`
  .dnb-dropdown__shell {
    width: 10rem;
  }
`
const CustomWidthTwo = styled(Dropdown)`
  &.dnb-dropdown--is-popup .dnb-drawer-list__root {
    width: 12rem;
  }
`
const CustomWidthThree = styled(Dropdown)`
  /** Change the "__shell" width */
  .dnb-dropdown__shell {
    width: 10rem;
  }

  /** Change the "__list" width */
  .dnb-drawer-list__root {
    width: 20rem;
  }
`
const CustomWidthFour = styled(Dropdown)`
  width: 60%;
  min-width: 224px; /** 14rem (please use pixels on min-width!) */
  max-width: 25rem;

  /** In case we have a label */
  .dnb-form-label + .dnb-dropdown__inner {
    width: 100%;
  }
`
render(<FormRow direction="vertical">
  <CustomWidthOne
    label="Label:"
    size="default"
    icon_position="left"
    bottom
    data={data}
  />
  <CustomWidthTwo
    label="Label:"
    size="small"
    more_menu
    bottom
    data={data}
  />
  <CustomWidthThree
    label="Label:"
    size="large"
    align_dropdown="right"
    bottom
    data={data}
  />
  <CustomWidthFour
    title="Min and max width"
    stretch={true}
    bottom
    data={data}
  />
</FormRow>)

<Dropdown
  data={data}
  label="Label:"
  label_direction="vertical"
  status="Message to the user"
/>

const scrollableData = [
  {
    content: 'A'
  },
  {
    content: 'B'
  },
  {
    selected_value: <NumberFormat always_selectall ban>11345678962</NumberFormat>,
    content: [<NumberFormat always_selectall ban>11345678962</NumberFormat>, 'C']
  },
  {
    selected_value: <NumberFormat always_selectall ban>15349648901</NumberFormat>,
    content: [<NumberFormat always_selectall ban>15349648901</NumberFormat>, 'D']
  },
  {
    content: 'E'
  },
  {
    selected_key: 'key_1',
    selected_value: 'Find me by keypress',
    content: ['F', 'F', 'F', 'F']
  },
  {
    content: 'G'
  },
  {
    content: 'H'
  }
];
render(
  <Dropdown
    data={scrollableData}
    value="key_1"// use either index (5) or selected_key: 'key_1'
    label="Label:"
  />
)

<Dropdown 
  disabled 
  data={['Disabled Dropdown']} 
  label="Label:" />

<Dropdown 
    disabled 
    variant="tertiary" 
    data={['Disabled Dropdown']} 
    label="Disabled tertiary dropdown" />