import { __ } from '@wordpress/i18n';
import { mapOptions } from '@tailwind/helpers';
// import from other panel
import { opacity, rounded } from '@tailwind/appearance';
import { overflow } from '@tailwind/advancedstyle';
import { scale, rotate } from '@tailwind/transform';
import { blurfilters, mixblendfilters } from '@tailwind/appearance';
import { effectFilterValues } from '@tailwind/appearance';

import ShadowInnerIcon from 'blockbite-icons/dist/ShadowInner';
import MoveIcon from 'blockbite-icons/dist/Move';
import CropIcon from 'blockbite-icons/dist/Crop';

const mediaPositionValues = [
  { label: 'Center', id: 'center' },
  { label: 'Bottom', id: 'bottom' },
  { label: 'Top', id: 'top' },
  { label: 'Left', id: 'left' },
  { label: 'Left Bottom', id: 'left-bottom' },
  { label: 'Left Top', id: 'left-top' },
  { label: 'Right', id: 'right' },
  { label: 'Right Bottom', id: 'right-bottom' },
  { label: 'Right Top', id: 'right-top' },
];

const mediaFitValues = [
  { label: 'Fill', id: 'fill' },
  { label: 'Contain', id: 'contain' },
  { label: 'Cover', id: 'cover' },
  { label: 'None', id: 'none' },
  { label: 'Scale Down', id: 'scale-down' },
];

const mediafocalposition = {
  // same id as mediaPosition since we use object-
  id: 'mediafocalposition',
  label: __('Image Position', 'blockbite'),
  helper: __('Set media orientation', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  dynamicControl: 'FocalPoint',
  modifiers: [
    {
      id: 'mediapos',
      label: __('Image Position', 'blockbite'),
      selector: 'object-',
      options: [],
      className: '',
    },
  ] as any,
};

const mediaposition = {
  id: 'mediabgposition',
  label: __('Image Position', 'blockbite'),
  helper: __('Set media orientation', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'mediapos',
      label: __('Image Position', 'blockbite'),
      selector: 'object-',
      options: mapOptions([...mediaPositionValues]),
      className: '',
    },
  ],
};

const mediafit = {
  id: 'mediafit',
  label: __('Image fit', 'blockbite'),
  helper: __('Set the fitting of the media', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'mediafit',
      label: __('Image fit', 'blockbite'),
      selector: 'object-',
      dynamicControl: 'ImageFit',
      options: mapOptions([...mediaFitValues]),
      className: '',
    },
    {
      id: 'mediaheight',
      label: __('Image Height', 'blockbite'),
      selector: 'h-',
      dynamicControl: 'MetricsControl',
      codex: 'units.spacing',
      className: '',
    },
  ],
};

// since we already defined mediafilters, and later changed it to effect filters keep this control for medias/media
export const mediafilters = {
  id: 'mediafilters',
  label: __('Effect Filters', 'blockbite'),
  helper: __('Set the filters of the media', 'blockbite'),
  optionClass: '',
  supports: { hover: false },
  modifiers: [
    {
      id: 'mediafilters',
      label: __('Image Filters', 'blockbite'),
      options: mapOptions([...effectFilterValues]),
      className: '',
    },
  ],
};

export const mediaPanel = {
  id: 'mediaeffects',
  expand: true,
  label: __('Media Effects', 'blockbite'),
  filter: [
    {
      value: 'fit',
      label: __('Fit', 'blockbite'),
      controls: ['rounded', 'mediafit', 'scale', 'mediafit'],
      icon: CropIcon,
    },
    {
      value: 'position',
      label: __('Position', 'blockbite'),
      controls: ['mediafocalposition', 'mediaposition', 'rotate'],
      icon: MoveIcon,
    },
    {
      value: 'filters',
      label: __('Filters', 'blockbite'),
      controls: ['mediafilters', 'blurfilters', 'mixblendfilters', 'opacity'],
      icon: ShadowInnerIcon,
    },
  ],
  controls: [
    mediafit,
    overflow,
    scale,
    mediafocalposition,
    mediaposition,
    rotate,
    opacity,
    rounded,
    mediafilters,
    blurfilters,
    mixblendfilters,
  ],
};

export default { mediaPanel };