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

import Border from './Border';
import BorderHover from './BorderHover';
import BorderRadius from './BorderRadius';
import BorderRadiusHover from './BorderRadiusHover';

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

  const border = attributes.border || {
    desktop: { width: '', style: '', color: '', sides: {}, isLinkActive: true },
    tablet:  { width: '', style: '', color: '', sides: {}, isLinkActive: true },
    mobile:  { width: '', style: '', color: '', sides: {}, isLinkActive: true },
  };
  const border__hover = attributes.border__hover || {
    desktop: { width: '', style: '', color: '', sides: {}, isLinkActive: true },
    tablet:  { width: '', style: '', color: '', sides: {}, isLinkActive: true },
    mobile:  { width: '', style: '', color: '', sides: {}, isLinkActive: true },
  };

  const borderRadius = attributes.borderRadius || {
    desktop: { value: '', corners: {}, isLinkActive: true },
    tablet:  { value: '', corners: {}, isLinkActive: true },
    mobile:  { value: '', corners: {}, isLinkActive: true },
  };
  const borderRadius__hover = attributes.borderRadius__hover || {
    desktop: { value: '', corners: {}, isLinkActive: true },
    tablet:  { value: '', corners: {}, isLinkActive: true },
    mobile:  { value: '', corners: {}, isLinkActive: true },
  };

  return (
    <PanelBody
      className="border-controls-wrapper"
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          {activeStyleTab === 'main' && (
            <span className="title">
              <BorderMainIcon />
              {__('Borders', 'axcelersblocks')}
            </span>
          )}
          {activeStyleTab === 'mainHover' && (
            <span className="title">
              <BorderMainIcon />
              {__('Borders (Hover)', 'axcelersblocks')}
            </span>
          )}
        </div>
      }
      initialOpen={false}
    >
      {activeStyleTab === 'main' && (
        <>
          <Border
            activeDevice={activeDevice}
            border={border}
            setAttributes={setAttributes}
          />
          <BorderRadius
            activeDevice={activeDevice}
            borderRadius={borderRadius}
            setAttributes={setAttributes}
          />
        </>
      )}

      {activeStyleTab === 'mainHover' && (
        <>
          <BorderHover
            activeDevice={activeDevice}
            border__hover={border__hover}
            setAttributes={setAttributes}
          />
          <BorderRadiusHover
            activeDevice={activeDevice}
            borderRadius__hover={borderRadius__hover}
            setAttributes={setAttributes}
          />
        </>
      )}
    </PanelBody>
  );
}
