'use client';

import { Button } from '@/components/ui/button';
import { useState } from 'react';
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import Image from 'next/image';
import Link from 'next/link';

const GoodVisionsBlock = () => {
  return (
    <div className='w-full flex flex-col md:flex-row justify-between items-stretch bg-client-light-blue/50'>
      <div className='shrink-0 p-5'>
        <span className='text-neutral-800 text-2xl font-bold'>Gode visioner</span>
      </div>
      <div className='flex-1 text-xl font-bold text-neutral-600 p-5'>
        <p>Er du registreret bruger på Magasinet KBH kan du sætte dit præg på København. Stem visioner op og ned … eller vis din egen frem</p>
      </div>
      <div className='relative w-full md:w-16'>
        <div className='relative md:absolute inset-0 h-full bg-client-blue'>
          <div className='w-full h-full flex items-center justify-center'>
            <GoodVisionsDialog />
          </div>
        </div>
      </div>
    </div>
  );
};

export default GoodVisionsBlock;

const GoodVisionsDialog = () => {
	const [open, setOpen] = useState(false);

	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogTrigger asChild>
                <Button variant='ghost' className='flex w-full md:w-16 h-full flex-col items-center rounded-none cursor-pointer hover:bg-transparent'>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512"
                        className='size-6 fill-white'
                    >
                        <path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/>
                    </svg>
                    <span className='leading-none text-wrap font-medium text-white'>læs mere</span>
                </Button>
			</DialogTrigger>
			<DialogContent
                className="w-full lg:min-w-[798px] max-h-[calc(100dvh-1.5rem)] sm:max-h-[calc(90dvh)] overflow-y-auto rounded-none gap-0 p-5"
                showCloseButton={false}
                aria-describedby={undefined}
            >
                <div className='relative flex flex-col lg:flex-row w-full'>
                    <Button variant={'default'} className='absolute top-0 right-0 w-[38px] h-[34px] flex items-center justify-center bg-client-blue rounded-none cursor-pointer hover:bg-bg-client-blue' onClick={() => setOpen(false)}>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 384 512"
                            className='size-6 fill-white'
                        >
                            <path d="M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"/>
                        </svg>
                    </Button>
                    <div className='bg-client-blue p-3'>
                        <Image src='/images/visions-popup/vis-pop-up-logo.png' alt='Visioner for København' width={69} height={69} />
                        <DialogTitle className='text-white text-2xl font-bold mt-2'>
                            VISIONER
                            <br />
                            FOR 
                            <br />
                            KØBENHAVN
                        </DialogTitle>
                    </div>
                    <div className='flex-1 bg-[#dddee8] border-0 lg:border-x border-x-client-blue font-bold leading-5 text-neutral-600 px-3 pt-4 lg:pt-10 pb-3'>
                        <p className='leading-6 text-2xl text-neutral-800'>Hvad synes du, vi skal have i København?</p>
                        <p className='pt-3'>Er du registreret bruger hos Magasinet KBH kan du stemme visioner præsenteret på siden op og ned.</p>
                        <div className='flex items-center gap-4 pt-2'>
                            <Image
                                src='/images/visions-popup/popup_visioner_chart_03.png'
                                alt='Visioner for København'
                                width={68}
                                height={98}
                                className='shrink-0'
                            />
                            <p>Du stemmer ved at klikke enten på pil op eller pil ned, når du er på en side med en vision.</p>
                        </div>
                        <p className='pt-4'>Vi kan ikke love dig, at populære visioner bliver til virkelighed i morgen. Men Magasinet KBH er et centralt medie at orientere sig i for både offentlige og private der har med Københavns udvikling at gøre.</p>
                    </div>
                    <div className='flex flex-col gap-3 w-full lg:w-54 bg-[#dddee8] font-bold text-xs leading-5 text-neutral-600 px-3 pt-4 lg:pt-12 pb-3'>
                        <p className='text-[22px]'>Har du en vision?</p>
                        <p>Vi inviterer med mellemrum arkitekter til at sende deres visioner ind til Magasinet KBH.</p>
                        <p>Men man behøver ikke at være arkitekt for at få gode idéer. Derfor er alle læsere velkomne til at sende deres vision ind til Magasinet KBH.</p>
                        <p>Send os mindst én illustration af din idé sammen med en kortfattet tekst.</p>
                        <p>Illustrationen kan være alt fra en blyantstegning eller et foto taget med din telefon til en Photoshop-collage.</p>
                        <p>Du kan også bruge et billede fundet på nettet, men du skal sikre dig, at billedet må reproduceres. Har du fundet billedet på nettet, så skriv i din mail til os hvor på nettet du har fundet det.</p>
                        <p>
                            Skriv til
                            <br />
                            <Link href='mailto:visioner@magasinetkbh.dk' className='text-client-blue'>visioner@magasinetkbh.dk</Link>
                        </p>
                    </div>
                </div>
			</DialogContent>
		</Dialog>
	);
}