import Provider from "relements/build/esm/theme/provider";
import Box from "relements/build/esm/ui/box";
import Text from "relements/build/esm/ui/text";

<Provider>
  <Box flexDirection="column">
    <Text variant="display-1.semi-bold">Haptik Phrases</Text>
    <Text variant="body.lg">
      A string management API to help you centralize all your strings/texts in
      the application. This comes with the following feature -
    </Text>
    <ul>
      <li>
        <Text variant="body.md">Adds text variants automatically</Text>
      </li>
      <li>
        <Text variant="body.md">
          Eases the maintainence of string from a single entry point
        </Text>
      </li>
      <li>
        <Text variant="body.md">
          Comes with default reserved keywords for UI and Haptik
        </Text>
      </li>
      <li>
        <Text variant="body.md">Built-in language support</Text>
      </li>
    </ul>
  </Box>
  <Box backgroundColor="yellow.pastel" borderRadius="sm" padding="md">
    <Text variant="body.md" color="yellow.deep">
      * Phrases is not meant to be used to define API keys, for it can change as
      per UI requirement
    </Text>
  </Box>
  <Box flexDirection="column">
    <Text variant="h1.bold">API</Text>
    <Text variant="h2.semi-bold">Import</Text>
    <pre>
      import HaptikPhrases from "@haptik/helpers/build/esm/HaptikPhrases";
    </pre>
    <Text variant="h2.semi-bold">Set locale</Text>
    <pre>HaptikPhrases.setLocale('hi')</pre>
    <Text variant="h2.semi-bold">Set value without key</Text>
    <Text variant="body.md">
      Key will be same as value provided, but capitalized and spaces will be
      replaced by underscore
    </Text>
    <pre>HaptikPhrases.setPhrase('sign in')</pre>
    <Text variant="h2.semi-bold">Set value with key</Text>
    <pre>HaptikPhrases.setPhrase('SIGN_IN','sign in')</pre>
    <Text variant="h2.semi-bold">Set Plural and Verb values</Text>
    <pre>
      {`HaptikPhrases.setPhrase("CONNECT", "connect", { 
  plural: "s", 
  verb: "ing"
})`}
    </pre>
    <Text variant="h2.semi-bold">Get value with formatters</Text>
    <pre>
      {`HaptikPhrases.getPhrase('SIGN_IN') // outputs "sign in"
HaptikPhrases.getPhrase('SIGN_IN.DEFAULT') // equivalent to not mentioning any formatter
HaptikPhrases.getPhrase('SIGN_IN.UPPERCASE') // outputs "SIGN IN"
HaptikPhrases.getPhrase('SIGN_IN.LOWERCASE') // outputs "sign in"
HaptikPhrases.getPhrase('SIGN_IN.HYPHENATED') // outputs "sign-in"
HaptikPhrases.getPhrase('SIGN_IN.CAPITALIZE') // outputs "Sign In"
HaptikPhrases.getPhrase('CONNECT.PLURAL') // outputs "connects"
HaptikPhrases.getPhrase('CONNECT.PLURAL.CAPITALIZE') // outputs "Connects"
HaptikPhrases.getPhrase('CONNECT.PLURAL.UPPERCASE') // outputs "CONNECTS"
HaptikPhrases.getPhrase('CONNECT.PLURAL.LOWERCASE') // outputs "connects"
HaptikPhrases.getPhrase('CONNECT.VERB') // outputs "connecting"`}
    </pre>
  </Box>
</Provider>