import {
  WooOnboardingTask,
  WooOnboardingTaskListItem,
} from '@woocommerce/onboarding'
import { registerPlugin } from '@wordpress/plugins'
import { useDispatch } from '@wordpress/data'
import { ONBOARDING_STORE_NAME } from '@woocommerce/data'
import Settings from '../admin/Settings'
import { I18nProvider } from '@wordpress/react-i18n'
import React from 'react'

const Task = () => {
  const { actionTask } = useDispatch(ONBOARDING_STORE_NAME)

  const taskCompleted = () => {
    actionTask('configure-posten-bring-checkout')
  }

  // Implement your task UI/feature here.
  return (
    <I18nProvider i18n={wp.i18n}>
      <Settings onTaskComplete={taskCompleted} />
    </I18nProvider>
  )
}

registerPlugin('add-task-content', {
  scope: 'woocommerce-tasks',
  render: () => (
    <WooOnboardingTask id="configure-posten-bring-checkout">
      {({ onComplete, query, task }) => (
        <Task onComplete={onComplete} task={task} query={query} />
      )}
    </WooOnboardingTask>
  ),
})

registerPlugin('add-task-list-item', {
  scope: 'woocommerce-tasks',
  render: () => (
    <WooOnboardingTaskListItem id="configure-posten-bring-checkout">
      {({ defaultTaskItem: DefaultTaskItem }) => (
        // Add a custom wrapper around the default task item.
        <div className="woocommerce-custom-tasklist-item">
          <DefaultTaskItem />
        </div>
      )}
    </WooOnboardingTaskListItem>
  ),
})
