import { registerBlockType } from '@wordpress/blocks';
import { createElement } from '@wordpress/element';

import metadata from '../blocks/exchange-rates/block.json';
import { Edit } from './blocks/exchange-rates/edit';

import converterMetadata from '../blocks/currency-converter/block.json';
import { ConverterEdit } from './blocks/currency-converter/edit';

import tickerMetadata from '../blocks/ticker/block.json';
import { TickerEdit } from './blocks/ticker/edit';

import rateCardMetadata from '../blocks/rate-card/block.json';
import { RateCardEdit } from './blocks/rate-card/edit';

import priceBadgeMetadata from '../blocks/price-badge/block.json';
import { PriceBadgeEdit } from './blocks/price-badge/edit';

import './blocks/shared/style.css';
import './blocks/exchange-rates/style.css';
import './blocks/currency-converter/style.css';
import './blocks/ticker/style.css';
import './blocks/rate-card/style.css';
import './blocks/price-badge/style.css';

/**
 * Block icon – RiCurrencyFill (Remix Icon).
 * Source: assets/icons/exchange-rates.svg
 */
const blockIcon = createElement(
  'svg',
  { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: 24, height: 24 },
  createElement('path', {
    fill: 'currentColor',
    d: 'M17.005 16.003h2v-12h-10v2h8zm0 2v2.999c0 .553-.45 1-1.007 1H4.012a1 1 0 0 1-1.007-1l.002-13.998c0-.553.45-1.001 1.007-1.001h2.99v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1zm-10-2v2h2v1h2v-1h.5a2.5 2.5 0 0 0 0-5h-3a.5.5 0 0 1 0-1h4.5v-2h-2v-1h-2v1h-.5a2.5 2.5 0 0 0 0 5h3a.5.5 0 0 1 0 1z',
  })
);

/**
 * Converter icon – IcTwotoneCurrencyExchange (Material Two-Tone).
 * Source: assets/icons/currency-converter.svg
 */
const converterIcon = createElement(
  'svg',
  { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: 24, height: 24 },
  createElement('path', {
    fill: 'currentColor',
    d: 'M12.89 11.1c-1.78-.59-2.64-.96-2.64-1.9c0-1.02 1.11-1.39 1.81-1.39c1.31 0 1.79.99 1.9 1.34l1.58-.67c-.15-.45-.82-1.92-2.54-2.24V5h-2v1.26c-2.48.56-2.49 2.86-2.49 2.96c0 2.27 2.25 2.91 3.35 3.31c1.58.56 2.28 1.07 2.28 2.03c0 1.13-1.05 1.61-1.98 1.61c-1.82 0-2.34-1.87-2.4-2.09l-1.66.67c.63 2.19 2.28 2.78 2.9 2.96V19h2v-1.24c.4-.09 2.9-.59 2.9-3.22c0-1.39-.61-2.61-3.01-3.44M3 21H1v-6h6v2H4.52c1.61 2.41 4.36 4 7.48 4a9 9 0 0 0 9-9h2c0 6.08-4.92 11-11 11c-3.72 0-7.01-1.85-9-4.67zm-2-9C1 5.92 5.92 1 12 1c3.72 0 7.01 1.85 9 4.67V3h2v6h-6V7h2.48C17.87 4.59 15.12 3 12 3a9 9 0 0 0-9 9z',
  })
);

registerBlockType(metadata as never, {
  icon: blockIcon,
  edit: Edit,
  save: () => null
});

registerBlockType(converterMetadata as never, {
  icon: converterIcon,
  edit: ConverterEdit,
  save: () => null
});

/**
 * Exchange Rates Ticker icon – stacked area chart (Material Symbols).
 * Source: assets/icons/ticker.svg
 */
const tickerIcon = createElement(
  'svg',
  { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: 24, height: 24 },
  createElement('path', {
    fill: 'currentColor',
    d: 'M1 21v-2h22v2zm1-3v-7h5.375l2 4h1.2l3.375-5.875l.925 1.875H22v7zm8.075-6.125L8.6 9H2V3h20v6h-5.875l-1.5-3h-1.2z',
  })
);

registerBlockType(tickerMetadata as never, {
  icon: tickerIcon,
  edit: TickerEdit,
  save: () => null
});

/**
 * Exchange Rate Card icon – credit card with dollar (Font Awesome Solid).
 */
const rateCardIcon = createElement(
  'svg',
  { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 640 640', width: 24, height: 24 },
  createElement('path', {
    fill: 'currentColor',
    d: 'M128 128c-35.3 0-64 28.7-64 64v256c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64zm232 224h128c13.3 0 24 10.7 24 24s-10.7 24-24 24H360c-13.3 0-24-10.7-24-24s10.7-24 24-24m-24-88c0-13.3 10.7-24 24-24h128c13.3 0 24 10.7 24 24s-10.7 24-24 24H360c-13.3 0-24-10.7-24-24m-124-56c11 0 20 9 20 20v4h8c11 0 20 9 20 20s-9 20-20 20h-47.5c-6.9 0-12.5 5.6-12.5 12.5c0 6.1 4.4 11.3 10.4 12.3l41.7 7c25.3 4.2 43.9 26.1 43.9 51.8c0 26.1-19 47.7-44 51.8v4.7c0 11-9 20-20 20s-20-9-20-20v-4h-24c-11 0-20-9-20-20s9-20 20-20h55.5c6.9 0 12.5-5.6 12.5-12.5c0-6.1-4.4-11.3-10.4-12.3l-41.7-7c-25.4-4.3-43.9-26.2-43.9-51.8c0-28.8 23.2-52.2 52-52.5v-4c0-11 9-20 20-20',
  })
);

registerBlockType(rateCardMetadata as never, {
  icon: rateCardIcon,
  edit: RateCardEdit,
  save: () => null
});

/**
 * Price Badge icon – price tag with dollar (Solar by 480 Design).
 */
const priceBadgeIcon = createElement(
  'svg',
  { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: 24, height: 24 },
  createElement('path', {
    fill: 'currentColor',
    fillRule: 'evenodd',
    clipRule: 'evenodd',
    d: 'm16.137 4.728l1.83 1.83C20.656 9.248 22 10.592 22 12.262c0 1.671-1.344 3.015-4.033 5.704c-2.69 2.69-4.034 4.034-5.705 4.034c-1.67 0-3.015-1.344-5.704-4.033l-1.83-1.83c-1.545-1.546-2.318-2.318-2.605-3.321c-.288-1.003-.042-2.068.45-4.197l.283-1.228c.413-1.792.62-2.688 1.233-3.302s1.51-.82 3.302-1.233l1.228-.284c2.13-.491 3.194-.737 4.197-.45c1.003.288 1.775 1.061 3.32 2.606m-4.99 9.6c-.673-.672-.668-1.638-.265-2.403a.75.75 0 0 1 1.04-1.046c.34-.18.713-.276 1.085-.272a.75.75 0 0 1-.014 1.5a.88.88 0 0 0-.609.277c-.387.387-.286.775-.177.884c.11.109.497.21.884-.177c.784-.784 2.138-1.044 3.005-.177c.673.673.668 1.639.265 2.404a.75.75 0 0 1-1.04 1.045a2.2 2.2 0 0 1-1.472.232a.75.75 0 1 1 .302-1.47c.177.037.463-.021.708-.266c.387-.388.286-.775.177-.884c-.11-.109-.497-.21-.884.177c-.784.784-2.138 1.044-3.005.176m-1.126-4.035a2 2 0 1 0-2.829-2.828a2 2 0 0 0 2.829 2.828',
  })
);

registerBlockType(priceBadgeMetadata as never, {
  icon: priceBadgeIcon,
  edit: PriceBadgeEdit,
  save: () => null
});