import { Flex, Txt } from '@mtyk/frontend/core/components'
import InputText from '@mtyk/frontend/forms/components/InputText'
import compose from '@mtyk/frontend/react/helpers/compose'
import { observer } from 'mobx-react-lite'
import React from 'react'
import { store } from './store'

export interface ActionBrowserProps {}
export interface ActionBrowserRefHandle {}

export default compose(observer)(function ActionBrowser(
  props: ActionBrowserProps
) {
  const {} = props
  return (
    <Flex>
      <InputText
        value={store.query}
        onChangeText={store.setQuery}
        placeholder="Search for actions..."
      />
      {store.results.items.map((result: any) => {
        const selected = store.results.isItemSelected(result)
        return (
          <Flex
            key={result.id}
            padding={[10, 10]}
            style={{
              backgroundColor: selected ? '#eee' : '#fff',
            }}
          >
            <Txt>{result.name}</Txt>
          </Flex>
        )
      })}
    </Flex>
  )
})