<?php

require_once __DIR__ . '/../vendor/autoload.php';
session_start();

use GuzzleHttp\Client;

if (!isset($_SESSION['access_token']) || empty($_SESSION['access_token'])) {
  header("Location: index.php");
  exit;
}

$requestUri = "https://api.instagram.com/v1/users/self/media/recent";
$recentPhotos = [];
$tag = '';

if (isset($_GET['tagQuery']) && !empty($_GET['tagQuery'])) {
  $tag = urlencode($_GET['tagQuery']);
  $requestUri = "https://api.instagram.com/v1/tags/$tag/media/recent";
}

$client = new Client();

$response = $client->get($requestUri, [
  'query' => [
    'access_token' => $_SESSION['access_token']['access_token'],
    'count' => 50
  ]
]);

$results = json_decode($response->getBody(), true);

if (is_array($results)) {
  $recentPhotos = array_chunk($results['data'], 4);
}


?>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Kapitola 30 – Demo Instagram</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script>
      $(document).ready(function() {
        $('.like-button').on('click', function(e) {
          e.preventDefault();

          var media_id = $(e.target).data('media-id');

          $.get('like.php?media_id=' + media_id, function(data) {
            if(data.success) {
              $(e.target).remove();
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <h1>Nejnovější fotografie na Instagramu</h1>
      <div class="row">
        <div class="col-md-12">
          <form class="form-horizontal" method="GET" action="feed.php">
            <fieldset class="form-group">
              <div class="col-xs-9 input-group">
                <input type="text" class="form-control" id="tagQuery" name="tagQuery" placeholder="Hledaná značka..." value="<?=$tag?>"/>
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i> Hledat</button>
                </span>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
      <div class="row">
        <?php foreach($recentPhotos as $photoRow): ?>
          <div class="row">
            <?php foreach($photoRow as $photo): ?>
            <div class="col-md-3">
              <div class="card">
                <div class="card-block">
                  <h4 class="card-title"><?=substr($photo['caption']['text'], 0, 30)?></h4>
                  <h6 class="card-subtitle text-muted"><?=substr($photo['caption']['text'], 30, 30)?></h6>
                </div>
                <img class="card-img-top" src="<?=$photo['images']['thumbnail']['url']?>" alt="<?=$photo['caption']['text']?>">
                <div class="card-block">
                  <?php foreach($photo['tags'] as $tag): ?>
                    <a href="#" class="card-link">#<?=$tag?></a>
                  <?php endforeach?>
                </div>
                <div class="card-footer text-right">
                  <?php if(!$photo['user_has_liked']): ?>
                    <a data-media-id="<?=$photo['id']?>" href="#" class="btn btn-xs btn-primary like-button"><i class="glyphicon glyphicon-thumbs-up"></i> To se mi líbí</a>
                  <?php endif; ?>
                </div>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  </body>
</html>
