import React, { FC } from 'react'
import { useBlockProps, InspectorControls } from '@wordpress/block-editor'
import { PanelBody, ToggleControl } from '@wordpress/components'

import PostenBringCheckoutCartBlock from './PostenBringCheckoutCartBlock'
import { Cart } from './components/CartSummary'

export declare interface EditProps {
  attributes: Record<string, unknown>
  setAttributes: (_: Record<string, unknown>) => void
  isSelected: boolean
}

export const Edit: FC<EditProps> = ({
  attributes,
  setAttributes,
  isSelected,
}) => {
  const blockProps = useBlockProps()
  return (
    <div {...blockProps}>
      <InspectorControls>
        <PanelBody title="Block options">
          {isSelected && (
            <div>
              <ToggleControl
                label="Dark mode"
                checked={attributes.darkMode as boolean}
                onChange={e => setAttributes({ darkMode: e })}
              />
            </div>
          )}
        </PanelBody>
      </InspectorControls>
      <PostenBringCheckoutCartBlock
        darkMode={attributes.darkMode as boolean}
        cart={
          {
            shippingRates: [
              {
                shipping_rates: [
                  {
                    rate_id: 'posten-bring-checkout-mailbox',
                    meta_data: [
                      {
                        key: 'service_name',
                        value: 'Pick-up parcel',
                      },
                      {
                        key: 'brand',
                        value: 'Posten',
                      },
                      {
                        key: 'lead_time',
                        value: {
                          description: 'Expected delivery Monday 13.00 - 17.00',
                        },
                      },
                    ],
                    selected: true,
                  },
                ],
              },
            ],
          } as Cart
        }
      />
    </div>
  )
}

export declare interface SaveProps {
  attributes: Record<string, unknown>
}

export const Save: FC<SaveProps> = () => {
  return <div {...useBlockProps.save()}></div>
}
