// Initialize the loop variables
let currentLine = [] // ops making up the current line
const content = [] // Components that we will ultimately render

// Map parchment attributes to React styling object
const attrsToStyle = (attrs) => {
  console.warn("Don't forget to implement styling!");
  return {};
};

// Given an array of ops that make up a single "line" of Parchment text,
// instantiate a component and push that component onto the content array.
function opsToComponent(line) {
  if(!line) return null; // Empty line = no component


  const lineAttributes = _.last(line)['attributes'] || {};

  // Handle cases that use different components
  const headerLevel = lineAttributes['header'] || false;
  if(headerLevel) {
    delete lineAttributes['header'];
    const key = "quill-header-" + _.size(content);
    return <Header key={key} level={headerLevel}>{opsToComponent(line)}</Header>;
  }

  // TODO Handle list (line attribute)
  // TODO Handle indent (line attribute)

  // Handle text cases
  return _.map(line, ({insert,attributes}, idx) => {
    if(insert == "\n" && !attributes) return null;
    const key = "quill-text-" + _.size(content) + "-" + idx;
    // TODO Handle link
    return <Text key={key} style={attrsToStyle(attributes)}>{insert}</Text>;
  });
};

const flushLine = () => {
  if(_.size(currentLine) > 0) {
    const component = opsToComponent(_.cloneDeep(currentLine));
    console.info("Pushing Quill component", component);
    content.push(component);
  }
  currentLine = [];
};

// Loop over operations
_.each(ops, (op) => {
  console.info("Processing parchment op", op);
  currentLine.push(op);
  const {insert} = op;
  const insertSize = _.size(insert);
  const crIdx = insert.lastIndexOf("\n");
  if(crIdx === insertSize-1)) { // Has a carriage return at the very end
    flushLine();
  }
});
flushLine();

return <View>{content}</View>;