export const modelFields = [
  'Word or sentence',
  'Part of speech 1',
  'Translation 1',
  'Definition 1',
  'Part of speech 2',
  'Translation 2',
  'Definition 2',
  'Usage example',
  'Transcription',
  'Sound',
];

export const valueFields = [
  'AnkiLan',
  'Translate by typing the word',
  '',
  'You can type the word in input field and get translate, sound and definition of this word',
  'Translate via sharing',
  '',
  'You can mark the word in you phone and share it with AnkiLan',
  'IMAGE WILL BE HERE',
  'guide',
  '',
];

const setSettings = model => {
  const deckName = model.deck.name;
  const modelName = model.name;
  const dbDeckReference = 'com.anki.decks';
  const dbModelReference = 'com.anki.models';
  const tags = ['AnkiLan'];

  const cardNames = ['Russian>English', 'English>Russian'];
  const css = `.card {
            font-family: 'Roboto', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 24px;
            text-align: center;
            color: black;
            background-color: white;
            word-wrap: break-word;
        }

        .big {
            font-size: 48px;
        }

        .small {
            font-size: 18px;
        }

        .sound--container {
            display: flex;
            justify-content: center;
            padding: 0px;
            align-items: center;
        }

        .sound {
            padding-left: 10px;
        }

        .transcription {
            color: #1e7efc;
            font-weight: bold;
        }
         .list{
         list-style: none;
         display: flex;
         flex-direction:column;
         align-items:center;
         padding: 0;
         }
         .definition{
         font-size: 20px;
         font-famyli:  sans-serif;
         font-style: italic;
         display: block;
         margin: 7px ;
         padding: 0 20px ;
         white-space: normal;
         width: 70vw;
         }
         .usage{
         background-color: rgba(100,100,100,0.1);
         padding: 10px;
         font-size: 20px;
         white-space: normal;
         width: 70vw;
         margin: 0 auto;
         border-radius: 5px;
         }`;

  const questionFmt1 = `
    <div class="big">{{Word or sentence}}</div>
    <ul class="list">
        <li>
            <div class="small">{{Part of speech 1}}</div>
        </li>
        <li>
            <div class="small">{{Part of speech 2}}</div>
        </li>
    </ul>
    <div class="sound--container">
        <div class="transcription">{{Transcription}}</div>
        <span class="sound">{{Sound}}</span>
  `;

  const questionFmt2 = '<div class="big">{{Translation 1}}</div>';

  const questionFormat = [questionFmt1, questionFmt2];

  const answerFmt1 = `
        <div class="big">{{Word or sentence}}</div>
        <div class="sound--container">
            <div class="transcription">{{Transcription}}</div>
            <span class="sound">{{Sound}}</span>
        </div>
        <hr>
        <div class="usage">{{Usage example}}</div>
        <hr />
        <ul class="list">
            <li>
                <div>
                    <div class="small">{{Part of speech 1}}</div>
                    <pre class="definition">{{Definition 1}}</pre>
                    <div>{{Translation 1}}</div>
                </div>
            </li>
            <li>
                <div>
                    <div class="small">{{Part of speech 2}}</div>
                    <pre class="definition">{{Definition 2}}</pre>
                    <div>{{Translation 2}}</div>
                </div>
            </li>
        </ul>
    </div>`;
  const answerFormat = [answerFmt1, answerFmt1];

  // ADDING NOTES //

  const deckProperties = {
    name: deckName,
    reference: dbDeckReference,
  };
  const modelProperties = {
    name: modelName,
    reference: dbModelReference,
    fields: modelFields,
    tags,
    cardNames,
    questionFormat,
    answerFormat,
    css,
  };

  return {
    modelId: undefined,
    modelProperties: modelProperties,
    deckId: model.deck.id,
    deckProperties: deckProperties,
  };
};
export default setSettings;