import { Fill, Stroke, Style, Text } from 'ol/style';
import { ZoneData } from '../type';

const getZoneStyleFromData = ({ zoneData }: { zoneData: ZoneData }) => {
  // Base style configuration for each zone type
  const zoneStyles = {
    warning: {
      fill: new Fill({ color: 'rgba(255, 193, 7, 0.3)' }), // Yellow with transparency
      stroke: new Stroke({ color: '#FFC107', width: 2 }),
      textColor: '#856404',
    },
    alarm: {
      fill: new Fill({ color: 'rgba(220, 53, 69, 0.3)' }), // Red with transparency
      stroke: new Stroke({ color: '#DC3545', width: 3 }),
      textColor: '#721C24',
    },
    default: {
      fill: new Fill({ color: 'rgba(108, 117, 125, 0.2)' }), // Gray with transparency
      stroke: new Stroke({ color: '#6C757D', width: 1 }),
      textColor: '#383D41',
    },
  };

  const styleConfig = zoneStyles[zoneData.type] || zoneStyles.default;

  // Create the base style
  const baseStyle = {
    fill: styleConfig.fill,
    stroke: styleConfig.stroke,
  };

  // Add text style if message exists
  if (zoneData.message && zoneData.message.trim()) {
    return new Style({
      ...baseStyle,
      text: new Text({
        font: 'bold 14px Arial, sans-serif',
        text: zoneData.message,
        fill: new Fill({ color: styleConfig.textColor }),
        stroke: new Stroke({
          color: 'white',
          width: 3,
        }),
        placement: 'point', // Center text in polygon
        overflow: true, // Allow text to overflow if needed
        textAlign: 'center',
        textBaseline: 'middle',
      }),
    });
  }

  // Return style without text if no message
  return new Style(baseStyle);
};

export default getZoneStyleFromData;