const { registerBlockType, registerBlockVariation } = wp.blocks;
const { __ } = wp.i18n;

import './index.css';
import './styles/common.scss';
import './templates/style.scss';
import './block/editor.scss';
import Edit, {getEditWrapperProps} from './block/edit';

registerBlockType( 'namespace/journey-timeline-block', {
  title: __( 'Our Journey Block', 'our-journey' ),
  icon: 'smiley',
  category: 'widgets',
  attributes: {
    className: {type: 'string', default: ''},
    heading: { type: 'string', default: 'Our Journey' },
    entries: {type: 'array', default: [] },
    layout: {type: 'string', default: 'layout-one'},
    isPreview: { type: 'boolean', default: false },
    showHeading: {type: 'boolean', default: 1 },
    showYear: {type: 'boolean', default: 1 },
    showTitle: {type: 'boolean', default: 1 },
    showDescription: {type: 'boolean', default: 1 },
    showImage: {type: 'boolean', default: 1 },

    //Heading Field Options
    headingFontSize: {
        type: 'object',
        default: {desktop: '', tablet: '', mobile: ''}
    },
    headingFontSizeUnit: {type: 'string', default: 'px' },
    headingLineHeight: {
        type: 'object',
        default: {desktop: '', tablet: '', mobile: ''}
    },
    headingLineHeightUnit: {type: 'string', default: 'px' },
    headingFontFamily: {type: 'string', default: ''},
    headingFontWeight: {type: 'string', default: ''},
    headingFontColor: {type: 'string', default: '' },
    headingBgColor: {type: 'string', default: '' },

    //Title Field Options.
    titleTag: { type: 'string', default: 'h4'},
    titleFontSize: {
        type: 'object',
        default: {desktop: '', tablet: '', mobile: ''}
    },
    titleFontSizeUnit: {type: 'string', default: 'px' },
    titleLineHeight: {
        type: 'object',
        default: {desktop: '', tablet: '', mobile: ''}
    },
    titleLineHeightUnit: {type: 'string', default: 'px' },
    titleFontFamily: {type: 'string', default: ''},
    titleFontWeight: {type: 'string', default: ''},
    titleFontColor: {type: 'string', default: '' },
    titleTextShadow: {
      type: 'object',
      default: {
        enable: true,
        desktop: { x: '1', y: '4', blur: '0', color: 'rgba(0, 0, 0, 0.2)' },
        tablet: { x: '', y: '', blur: '', color: '' },
        mobile: { x: '', y: '', blur: '', color: '' }
      }
    },

    //Year Field Options.
    yearTag: { type: 'string', default: 'p'},
    yearFontSize: {
        type: 'object',
        default: {desktop: '', tablet: '', mobile: ''}
    },
    yearFontSizeUnit: {type: 'string', default: 'px' },
    yearLineHeight: {
        type: 'object',
        default: {desktop: '', tablet: '', mobile: ''}
    },
    yearLineHeightUnit: {type: 'string', default: 'px' },
    yearFontFamily: {type: 'string', default: ''},
    yearFontWeight: {type: 'string', default: ''},
    yearFontColor: {type: 'string', default: '' },
    yearTextShadow: {
      type: 'object',
      default: {
        enable: true,
        desktop: { x: '1', y: '4', blur: '0', color: 'rgba(0, 0, 0, 0.2)' },
        tablet: { x: '', y: '', blur: '', color: '' },
        mobile: { x: '', y: '', blur: '', color: '' }
      }
    },

    //Descriotion Field Options.
    descriptionFontSize: {
        type: 'object',
        default: {desktop: '', tablet: '', mobile: '' }
    },
    descriptionFontSizeUnit: {type: 'string', default: 'px' },
    descriptionLineHeight: {
        type: 'object',
        default: {desktop: '', tablet: '', mobile: ''}
    },
    descriptionLineHeightUnit: {type: 'string', default: 'px' },
    descriptionFontFamily: {type: 'string', default: ''},
    descriptionFontWeight: {type: 'string', default: ''},
    descriptionFontColor: {type: 'string', default: '' },
    imageWidth: {type: 'number', default: 100 },
    imageSize: {
        type: 'object',
        default: {desktop: 'auto', tablet: 'auto', mobile: 'auto' }
    },
    sectionWidthType: {type: 'string', default: 'default' },
    sectionWidth: {type: 'object', default: {} },
    sectionWidthUnit: {type: 'string', default: 'px' },
    sectionPadding: {type: 'object', default: {} },
    sectionPaddingIsLinked: {type: 'boolean', default: 1 },
    sectionMargin: {type: 'object', default: {} },
    sectionMarginIsLinked: {type: 'boolean', default: 1 },
    sectionBgColor: {type: 'string', default: '' },
    sectionBgImage: {type: 'string', default: '' },
    sectionItemContentBgColor: {type: 'string', default: '' },
    sectionItemYearBgColor: {type: 'string', default: '' }
  },
  example: {
    attributes: {
      isPreview: true
    }
  },
  supports: {
    align: true, // enables full width layout.
    __experimentalSelector: '.journey-timeline-block-section' // IMPORTANT!
  },
  edit: Edit,
  save() {
      return null; // PHP render.
  },
  getEditWrapperProps
});

// Preview Images Url.
const layout1Image = new URL( './assets/preview/layout-1.jpg', import.meta.url ).href;
const layout2Image = new URL( './assets/preview/layout-2.jpg', import.meta.url ).href;

// Register Block Variations.
const variations = [
  {
    name: 'layout-one',
    title: 'Minimal Milestone Timeline',
    description: 'A clean, vertical timeline layout with a dotted center line and alternating milestone cards. Ideal for displaying project milestones, brand journeys, or historical events in a visually appealing way. Lightweight design with subtle animations to enhance user experience.',
    attributes: {
      layout: 'layout-one'
    },
    icon: <img src={layout1Image} style={{ width: '100%' }} alt="Minimal Milestone Timeline" />,
    isDefault: true,
    scope: [ 'inserter' ],
    example: {
      attributes: {
        layout: 'layout-one',
        isPreview: true
      }
    }
  },
  {
    name: 'layout-two',
    title: 'Modern Card Timeline',
    description: 'A modern vertical timeline block featuring colorful card-style milestones on both sides of a solid center line. Ideal for company history, achievements, or storytelling in a structured and professional way. Emphasizes clarity, readability, and visual impact.',
    attributes: {
      layout: 'layout-two'
    },
    icon: <img src={layout2Image} style={{ width: '100%' }} alt="Modern Card Timeline" />,
    scope: [ 'inserter' ],
    example: {
      attributes: {
        layout: 'layout-two',
        isPreview: true
      }
    }
  }
];
variations.forEach( variation => {
  registerBlockVariation( 'namespace/journey-timeline-block', variation );
});