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

const getPolylineStyleFromData = ({ zoneData }: { zoneData: ZoneData }) => {
  // Base style configuration for each zone type
  const polylineStyles = {
    warning: {
      stroke: new Stroke({
        color: '#FFC107', // Yellow
        width: 4,
        lineDash: [10, 5], // Dashed line for warning
      }),
      textColor: '#856404',
    },
    alarm: {
      stroke: new Stroke({
        color: '#DC3545', // Red
        width: 5,
        lineDash: [15, 5], // More prominent dash for alarm
      }),
      textColor: '#721C24',
    },
    default: {
      stroke: new Stroke({
        color: '#6C757D', // Gray
        width: 3,
        lineDash: [], // Solid line for default
      }),
      textColor: '#383D41',
    },
  };

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

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

  // Add text style if message exists
  if (zoneData.message && zoneData.message.trim()) {
    return new Style({
      ...baseStyle,
      text: new Text({
        font: 'bold 12px Arial, sans-serif',
        text: zoneData.message,
        fill: new Fill({ color: styleConfig.textColor }),
        stroke: new Stroke({
          color: 'white',
          width: 3,
        }),
        placement: 'line', // Place text along the line
        overflow: true,
        textAlign: 'center',
        textBaseline: 'middle',
        repeat: 100000000, // Repeat text every 200 pixels
      }),
    });
  }

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

export default getPolylineStyleFromData;
