import styled from '@emotion/styled';

import { EditMode } from './EditModeContext';

const MinorHint = styled.span`
  opacity: 0.5;
`;

const UrgentHint = styled.span`
  color: #f97569;
  &:before {
    content: '⚠️ ';
    display: inline-block;
    margin-right: 10px;
  }
`;

export default function getEditHint(
  editMode: EditMode,
  selectionStartSeconds: number,
  selectionEndSeconds: number
) {
  if (editMode === 'replace') {
    if (selectionEndSeconds - selectionStartSeconds > 60) {
      return <UrgentHint>Shorter selections are recommended.</UrgentHint>;
    } else if (selectionEndSeconds - selectionStartSeconds < 6) {
      return (
        <UrgentHint>
          Selections under 6 seconds may give unexpected results.
        </UrgentHint>
      );
    } else {
      return (
        <MinorHint>
          Drag the edges of the selection to pick a span of time to replace.
        </MinorHint>
      );
    }
  } else if (editMode === 'crop') {
    return (
      <MinorHint>
        Drag the edges of the selection to pick a span of time to keep.
      </MinorHint>
    );
  } else if (editMode === 'remove') {
    return (
      <MinorHint>
        Drag the edges of the selection to pick a span of time to delete.
      </MinorHint>
    );
  } else if (editMode === 'extend') {
    return (
      <MinorHint>
        Drag the start of the selection to pick a point to extend from.
      </MinorHint>
    );
  } else if (editMode === 'fadeOut') {
    return (
      <MinorHint>
        Drag the start of the selection to pick a point to fade out from.
      </MinorHint>
    );
  }
  return null;
}

/*
          {editMode === 'replace'
          ? 'Drag the edges of the selection to pick a span of time to replace.'
          : editMode === 'crop'
            ? 'Drag the edges of the selection to pick a span of time to keep.'
            : editMode === 'remove'
              ? 'Drag the edges of the selection to pick a span of time to delete.'
              : editMode === 'extend'
                ? 'Drag the start of the selection to pick a point to extend from.'
                : editMode === 'fadeOut'
                  ? 'Drag the start of the selection to pick a point to fade out from.'
                  : ''}

*/