import { Icon } from '../../Atoms/Icon/Icon';
import { FONT_FAMILY_SANS } from '../../../designTokens';

const CONTROL_BUTTON_STYLE = {
  width: 36,
  height: 36,
  borderRadius: 8,
  border: '1px solid #E5E7EB',
  background: '#FFFFFF',
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  cursor: 'pointer',
  padding: 0,
  boxShadow: '0 1px 2px rgba(15, 23, 42, 0.06)',
};

const BADGE_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 500,
  fontSize: '13px',
  lineHeight: '20px',
  color: '#29474C',
  background: '#FFFFFF',
  border: '1px solid #E5E7EB',
  borderRadius: 8,
  padding: '6px 12px',
  boxShadow: '0 1px 2px rgba(15, 23, 42, 0.06)',
};

export const OrganigramaZoomControls = ({
  zoom = 1,
  onZoomIn,
  onZoomOut,
  onFitView,
  className = '',
  style,
}) => {
  const zoomPercent = Math.round(zoom * 100);

  return (
    <div
      className={className}
      style={{
        position: 'absolute',
        inset: 0,
        pointerEvents: 'none',
        ...style,
      }}
    >
      <div
        style={{
          position: 'absolute',
          left: 16,
          bottom: 16,
          pointerEvents: 'auto',
        }}
      >
        <span style={BADGE_STYLE}>{`${zoomPercent}%`}</span>
      </div>

      <div
        style={{
          position: 'absolute',
          right: 16,
          bottom: 16,
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          pointerEvents: 'auto',
        }}
      >
        <button type="button" aria-label="Alejar" style={CONTROL_BUTTON_STYLE} onClick={onZoomOut}>
          <Icon name="MinusIcon" variant="24-outline" size={20} style={{ color: '#29474C' }} />
        </button>
        <button type="button" aria-label="Acercar" style={CONTROL_BUTTON_STYLE} onClick={onZoomIn}>
          <Icon name="PlusIcon" variant="24-outline" size={20} style={{ color: '#29474C' }} />
        </button>
        <button type="button" aria-label="Ajustar vista" style={CONTROL_BUTTON_STYLE} onClick={onFitView}>
          <Icon name="Squares2X2Icon" variant="24-outline" size={20} style={{ color: '#29474C' }} />
        </button>
      </div>
    </div>
  );
};

export default OrganigramaZoomControls;
