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

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>
      <PostenBringCheckoutBlock
        checkoutExtensionData={{ setExtensionData: () => '' }}
        darkMode={attributes.darkMode as boolean}
        cart={
          {
            shippingRates: [
              {
                shipping_rates: [
                  {
                    rate_id: 'posten-bring-checkout-pickup-point',
                    meta_data: [
                      {
                        key: 'service_name',
                        value: 'Pickup parcel',
                      },
                      {
                        key: 'service_description',
                        value:
                          'The parcel will be delivered to the selected pickup point. You can track the parcel in the Posten app.',
                      },
                      {
                        key: 'brand',
                        value: 'Posten',
                      },
                      {
                        key: 'pickup_points',
                        value: [
                          {
                            id: '12345',
                            displayName: 'Test Pickup point Testing',
                            address: 'TEST STREET 13, 3333 TESTING',
                            leadTime: {
                              description:
                                'Exepcted delivery Monday 15.00 - 18.00',
                            },
                            openingHours: 'Mon - Sat: 07.00 - 23.00',
                          },
                          {
                            id: '12346',
                            displayName: 'Another Pickup point Test',
                            address: 'TEST STREET 35, 5555 TEST',
                            leadTime: {
                              description:
                                'Exepcted delivery Monday 17.00 - 20.00',
                            },
                            openingHours: 'Mon - Sat: 07.00 - 23.00',
                          },
                          {
                            id: '12347',
                            displayName: 'Pakkeboks Test',
                            address: 'TEST STREET 1, 4444 TEST',
                            leadTime: {
                              description:
                                'Exepcted delivery Monday 12.00 - 18.00',
                            },
                            open247: true,
                            lockerDescription:
                              'Always open, requires the Posten-app',
                            openingHours: 'Mon - Sat: 07.00 - 23.00',
                          },
                          {
                            id: '12348',
                            displayName: 'Pickup point Test',
                            address: 'TEST STREET 3, 1111 TEST',
                            leadTime: {
                              description:
                                'Exepcted delivery Monday 15.00 - 18.00',
                            },
                            openingHours: 'Mon - Sat: 07.00 - 23.00',
                          },
                          {
                            id: '12349',
                            displayName: 'Yet another Pickup point Test',
                            address: 'TESTING STREET 2, 2222 TEST',
                            leadTime: {
                              description:
                                'Exepcted delivery Monday 19.00 - 21.00',
                            },
                            openingHours: 'Mon - Sat: 07.00 - 23.00',
                          },
                        ],
                      },
                    ],
                    selected: true,
                  },
                ],
              },
            ],
          } as Cart
        }
      />
    </div>
  )
}

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

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