import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import PositionMain from '../icons/PositionMain';
import { useDevice } from '../../controls/DeviceContext';

import Position from './Position';
import PositionHover from './PositionHover';

export default function PositionControls({ attributes, setAttributes, activeStyleTab }) {
  const { activeDevice } = useDevice();

  const position = attributes.position || { desktop: '', tablet: '', mobile: '' };
  const position__hover = attributes.position__hover || { desktop: '', tablet: '', mobile: '' };

  const inset = attributes.inset || {
    desktop: { top: '', right: '', bottom: '', left: '' },
    tablet:  { top: '', right: '', bottom: '', left: '' },
    mobile:  { top: '', right: '', bottom: '', left: '' },
  };
  const inset__hover = attributes.inset__hover || {
    desktop: { top: '', right: '', bottom: '', left: '' },
    tablet:  { top: '', right: '', bottom: '', left: '' },
    mobile:  { top: '', right: '', bottom: '', left: '' },
  };

  const overflowX = attributes.overflowX || { desktop: '', tablet: '', mobile: '' };
  const overflowX__hover = attributes.overflowX__hover || { desktop: '', tablet: '', mobile: '' };

  const overflowY = attributes.overflowY || { desktop: '', tablet: '', mobile: '' };
  const overflowY__hover = attributes.overflowY__hover || { desktop: '', tablet: '', mobile: '' };

  const zIndex = attributes.zIndex || { desktop: '', tablet: '', mobile: '' };
  const zIndex__hover = attributes.zIndex__hover || { desktop: '', tablet: '', mobile: '' };

  return (
    <PanelBody
      className="position-controls-wrapper"
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          {activeStyleTab === 'main' && (
            <span className="title">
              <PositionMain />
              {__('Position', 'axcelersblocks')}
            </span>
          )}
          {activeStyleTab === 'mainHover' && (
            <span className="title">
              <PositionMain />
              {__('Position (Hover)', 'axcelersblocks')}
            </span>
          )}
        </div>
      }
      initialOpen={false}
    >
      {activeStyleTab === 'main' && (
        <Position
          activeDevice={activeDevice}
          position={position}
          inset={inset}
          overflowX={overflowX}
          overflowY={overflowY}
          zIndex={zIndex}
          setAttributes={setAttributes}
        />
      )}

      {activeStyleTab === 'mainHover' && (
        <PositionHover
          activeDevice={activeDevice}
          position__hover={position__hover}
          inset__hover={inset__hover}
          overflowX__hover={overflowX__hover}
          overflowY__hover={overflowY__hover}
          zIndex__hover={zIndex__hover}
          setAttributes={setAttributes}
        />
      )}
    </PanelBody>
  );
}
