import { colors } from '@material-ui/core';
import React from 'react';
import moment from 'moment';

export const DRP_COLORS = [
  '#ffffff',
  'rgb(122, 232, 122)',
  'rgb(227, 255, 83)',
  'rgb(255, 140, 83)',
  'rgb(255, 0, 0)',
  'rgb(232, 122, 219)',
  'rgb(136, 11, 29)',
];

const TmCtrlDef_m = { mode: ['date', 'date'], format: 'YYYY-MM-DD HH:mm', showTime: { format: 'HH:mm' }, style: { width: 300 } };
export const TmCtrlDef = {
  '30mi': TmCtrlDef_m,
  '15mi': TmCtrlDef_m,
  '5mi': TmCtrlDef_m,
  h: { mode: ['date', 'date'], format: 'YYYY-MM-DD HH', showTime: { format: 'HH' }, style: { width: 260 } },
  d: { mode: ['date', 'date'], format: 'YYYY-MM-DD', showTime: false, style: { width: 260 } },
  m: { mode: ['month', 'month'], format: 'YYYY-MM', showTime: false, style: { width: 260 } },
  t: { mode: ['month', 'month'], format: 'YYYY-MM', showTime: false, style: { width: 260 } },
  y: { mode: ['year', 'year'], format: 'YYYY', showTime: false, style: { width: 260 } },
};

export function drpShColor(drp, str, alpha) {
  let r;
  let g;
  let b;
  if (drp === 0) {
    r = 192;
    g = 201;
    b = 236;
  } else if (drp < 1) {
    r = 255;
    g = 255;
    b = 255;
  } else if (drp < 15) {
    const ratio = drp / 15;
    r = Math.floor(255 + (122 - 255) * ratio);
    g = Math.floor(255 + (232 - 255) * ratio);
    b = Math.floor(255 + (122 - 255) * ratio);
  } else if (drp < 35) {
    const ratio = (drp - 15) / (35 - 15);
    r = Math.floor(122 + (227 - 122) * ratio);
    g = Math.floor(232 + (255 - 232) * ratio);
    b = Math.floor(122 + (83 - 122) * ratio);
  } else if (drp < 65) {
    const ratio = (drp - 35) / (65 - 35);
    r = Math.floor(227 + (255 - 227) * ratio);
    g = Math.floor(255 + (140 - 255) * ratio);
    b = Math.floor(83 + (83 - 83) * ratio);
  } else if (drp < 135) {
    const ratio = (drp - 65) / (135 - 65);
    r = Math.floor(255 + (255 - 255) * ratio);
    g = Math.floor(140 + (0 - 140) * ratio);
    b = Math.floor(83 + (0 - 83) * ratio);
  } else if (drp < 250) {
    const ratio = (drp - 135) / (250 - 135);
    r = Math.floor(255 + (232 - 255) * ratio);
    g = Math.floor(0 + (122 - 0) * ratio);
    b = Math.floor(0 + (219 - 0) * ratio);
  } else {
    r = 232;
    g = 122;
    b = 219;
  }
  if (str) {
    if (alpha) {
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
    return `rgb(${r}, ${g}, ${b})`;
  } else {
    return [r, g, b];
  }

}

export function drpColorLevel(drp) {
  if (drp === 0) {
    return DRP_COLORS[0];
  } else if (drp < 10) {
    return DRP_COLORS[1];
  } else if (drp < 25) {
    return DRP_COLORS[2];
  } else if (drp < 50) {
    return DRP_COLORS[3];
  } else if (drp < 100) {
    return DRP_COLORS[4];
  } else if (drp < 250) {
    return DRP_COLORS[5];
  }
  return DRP_COLORS[6];
}


export function yjLevelColor(lv) {
  if (lv === 1) {
    return '#0089f8';
  }
  if (lv === 2) {
    return 'yellow';
  }
  if (lv === 3) {
    return 'orange';
  }
  return '#fff';
}

export function levelRender(val) {
  if (val === 1) {
    return <div style={{ display: 'inline-block', padding: 8, borderRadius: 8, backgroundColor: '#0089f8' }}></div>
  } else if (val === 2) {
    return <div style={{ display: 'inline-block', padding: 8, borderRadius: 8, backgroundColor: 'yellow' }}></div>
  } else if (val === 3) {
    return <div style={{ display: 'inline-block', padding: 8, borderRadius: 8, backgroundColor: 'orange' }}></div>
  }
}

export function renderDrp(item, key) {
  const val = item[key];
  if (typeof val !== 'number' || (item.state !== 1 && item.drpState !== 1)) {
    return <span>--</span>;
  }
  let color = val > 0 ? drpColorLevel(val) : colors.grey[300];
  return (
    <span style={{ color, fontWeight: val ? 'bold' : 'normal' }}>{val.toFixed(1)}</span>
  );
}

export function sortDrp(itemA, itemB, key, order, stateKey) {
  stateKey = stateKey || 'state';
  //console.log(itemA, itemB, key, order);
  let vala = typeof itemA[key] !== 'number' || itemA[stateKey] !== 1 ? 99999 : itemA[key];
  let valb = typeof itemB[key] !== 'number' || itemB[stateKey] !== 1 ? 99999 : itemB[key];



  if (order === 'descend') {
    if (vala === 99999) {
      vala = -vala;
    }
    if (valb === 99999) {
      valb = -valb;
    }
  }

  return vala - valb;
}

export function renderTm(item, key) {
  let expired = item.state !== 1;
  let val = item[key || 'tm'];

  if (!val) {
    return null;
  }

  const formatted = moment(val).format('MM-DD HH:mm')

  return `${expired ? '❗ ' : ''}${formatted}`;
}

export function renderSkTm(item, type) {
  let expired = item[`${type}State`] !== 1;
  let val = item[`${type}Tm`];

  if (!val) {
    return null;
  }

  const formatted = moment(val).format('MM-DD HH:mm')

  return `${expired ? '❗ ' : ''}${formatted}`;
}

export function tmRenderMinute(val) {
  const t = moment(val);
  if (t.isValid()) {
    return t.format('YYYY-MM-DD HH:mm')
  }
  return undefined;
}


export function renderSkRz(item) {
  if (!item.rz || item.rzState !== 1) {
    return <span>--</span>;
  }
  if (item.rzWarning === 1) {
    return <span style={{ color: 'red' }}>{item.rz.toFixed(2)}</span>;
  }
  return item.rz.toFixed(2)
}


export function renderSkArz(item, key) {
  key = key || 'fsltdz'
  if (!item.rz || !item[key] || item.rzState !== 1) {
    return '--';
  }

  const val = item.rz - item[key];
  if (val >= 0) {
    return <span style={{ color: 'red' }}>{val.toFixed(1)}</span>
  }
  return <span style={{ color: 'green' }}>{val.toFixed(1)}</span>
}

export function renderSkDdz(item) {
  if (!item.rz || !item.ddz || item.rzState !== 1) {
    return '--';
  }

  const val = item.ddz - item.rz;
  if (val >= 0) {
    return <span style={{ color: 'red' }}>{val.toFixed(1)}</span>
  }
  return <span style={{ color: 'green' }}>{val.toFixed(1)}</span>
}

export function renderHDRz(item) {
  if (!item.rz || !(item.state === 1 || item.rzState === 1)) {
    return '--';
  }
  return item.rz.toFixed(2)
}


export const WARNRESP_COLOR = {
  Ⅰ: '#fa5c54',
  Ⅱ: '#feaf17',
  Ⅲ: '#fff600',
  Ⅳ: '#4584fc',
};

export const hdyjColor = {
  1: '#1296db',
  2: '#6feafd',
  3: '#f4ea2a'
};