# This is a flask application that overlaps uploaded images and text on top of images laid out in a grid on the browser.

from flask import Flask
from flask import request, redirect
from flask import render_template
import glob
import os

UPLOAD_FOLDER = './static/img/'
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

# create flask application
app = Flask(__name__)

# configure the upload folder
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# load the settings of the applicaiton
# (to handle the routing correctly)
app.config.from_pyfile('settings.py')

@app.route("/")
def overlap():
    images = glob.glob('./static/img/*.png')
    print(images)

    return render_template("mosaic.html", images=images)

from flask import request

@app.route('/upload', methods=['POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['tile']
        # print(request.files["zine test.png"])
        if file and allowed_file(file.filename):
            filename = file.filename
            print("zine test.png",filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        overwrite = request.form["overwrite"]
        os.system(f"cp ./static/img/{ filename } ./static/img/{ overwrite }")
        os.system(f"rm ./static/img/{ filename }")

        return redirect("/")
        # f = request.files['the_file']
        # f.save('/var/www/uploads/uploaded_file.txt')