import { CssProps, RefProps } from 'lupine.web';
import { HtmlVar } from './html-var';

export type ProgressHookProps = {
  onProgress?: (percentage: number, chunkNumber?: number, totalChunks?: number) => void;
  onShow?: (show: boolean, title?: string) => void;
};
export type ProgressProps = {
  hook: ProgressHookProps;
};

export const Progress = (props: ProgressProps) => {
  const css: CssProps = {
    position: 'fixed',
    display: 'flex',
    bottom: '0',
    left: '0',
    width: '100%',
    zIndex: 'var(--layer-modal-over)',
    flexDirection: 'column',
    backgroundColor: 'var(--primary-bg-color, #e6e6e6)',
    color: 'var(--primary-color, #333)',
    boxShadow: 'var(--cover-box-shadow-up, 0 -4px 12px rgba(0,0,0,0.1))',
    padding: '16px',
    '.progress-box': {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      width: '100%',
      height: 'auto',
      margin: 'auto',
    },
    '.progress-bar': {
      display: 'flex',
      width: '100%',
      height: '60px',
      borderRadius: '4px',
      overflow: 'hidden',
    },
    '.progress-bar1': {
      height: '100%',
      width: '0%',
      backgroundColor: 'var(--success-color, #49e57e)',
      transition: 'width 0.2s',
    },
    '.progress-bar2': {
      height: '100%',
      width: '100%',
      backgroundColor: 'var(--secondary-bg-color, #e5e7eb)',
      transition: 'width 0.2s',
    },
    '.progress-tips': {
      marginTop: '10px',
      fontSize: '30px',
      color: 'var(--success-color, #49e57e)',
      fontWeight: 'bold',
    },
    '.progress-title': {
      fontWeight: '600',
    },
  };

  props.hook.onProgress = (percentage: number, chunkNumber?: number, totalChunks?: number) => {
    // console.log(`Upload progress: ${percentage}% (chunk ${chunkNumber} of ${totalChunks})`);
    percentage = Math.round(percentage * 100);
    const bar1 = document.querySelector('.progress-bar1') as HTMLElement;
    const bar2 = document.querySelector('.progress-bar2') as HTMLElement;
    bar1.style.width = `${percentage}%`;
    bar2.style.width = `${100 - percentage}%`;
    dom.value = `${percentage}%`;
  };
  props.hook.onShow = (show: boolean, title?: string) => {
    if (title) {
      domTitle.value = title;
    }
    if (show) {
      ref.current?.classList.remove('d-none');
    } else {
      ref.current?.classList.add('d-none');
    }
  };

  const ref: RefProps = {};
  const domTitle = new HtmlVar('Progress');
  const dom = new HtmlVar('0 %');
  return (
    <div ref={ref} css={css} class='progress-top d-none'>
      <div class='progress-box'>
        <div class='progress-title mb-m align-left w-100p'>{domTitle.node}</div>
        <div class='progress-bar'>
          <div class='progress-bar1'></div>
          <div class='progress-bar2'></div>
        </div>
        <div class='progress-tips'>{dom.node}</div>
      </div>
    </div>
  );
};