import ipyvuetify as v
import traitlets
from traitlets import Int, Unicode, List, Dict, Bool

v.Col(cols=6, children=[
          v.TextField(outlined=True, class_='ma-2', label='URL', placeholder='https://')
])

# home listing
# https://www.rightmove.co.uk/property-for-sale/property-72921928.html

# all listing data: property of Rightmove.co.uk

from download_listing import get_listing
from pprint import pprint

class URLTextField(v.VuetifyTemplate):
    url = Unicode('').tag(sync=True, allow_null=True)
    loading = Bool(False).tag(sync=True)
    template = Unicode('''
    <v-text-field
            class="ma-2"
            v-model="url"
            :disabled="loading"
            :loading="loading"
            label="URL"
            placeholder="https:// ..."
            outlined
            clearable
            @change=get_properties(url)
    ></v-text-field>
    ''').tag(sync=True)
    
    def vue_get_properties(self, data):
        self.loading = True
        pprint(get_listing(data))
        self.loading = False

URLTextField()

from download_listing import get_listing

class URLTextField(v.VuetifyTemplate):
    url = Unicode('').tag(sync=True, allow_null=True)
    loading = Bool(False).tag(sync=True)
    props = List(get_listing('')).tag(sync=True)
    show = Bool(False).tag(sync=True)
    price_string = Unicode('£1,000,000').tag(sync=True)
    template = Unicode('''
    <template>
    <v-col cols="8">
        <v-text-field
                class="ma-2"
                v-model="url"
                :disabled="loading"
                :loading="loading"
                label="URL"
                placeholder="https:// ..."
                outlined
                clearable
                @change=get_properties(url)
        ></v-text-field>

          <v-card
            class="mx-auto"
            max-width="444"
          >
            <v-img
              v-bind:src="props[3]""
              height="200px"
            ></v-img>
            <v-card-title>
              {{ props[1] }}
            </v-card-title>
            <v-card-subtitle class="ma-4">
              {{ price_string }} - {{ props[2] }}
            </v-card-subtitle>
            <v-card-actions>
              <v-btn text v-bind:href="url">View on Rightmove</v-btn>
              <v-spacer></v-spacer>
              <v-btn
                icon
                @click="show = !show"
              >
                <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
              </v-btn>
            </v-card-actions>

            <v-expand-transition>
              <div v-show="show">
                <v-divider></v-divider>
                <v-card-text>
                  More information ...
                </v-card-text>
              </div>
            </v-expand-transition>
          </v-card>
    </v-col>
    </template>
    ''').tag(sync=True)
    
    def vue_get_properties(self, data):
        self.disabled = True
        self.loading = True
        self.props = list(get_listing(data))
        self.price_string = f'£{self.props[0]:,.0f}'
        self.disabled = False
        self.loading = False

u = URLTextField()
u

%matplotlib inline

import numpy as np
import pandas as pd

strange_walk = np.random.beta(2, 3, 10) * 100 * np.random.normal(size=10)
strange_walk = pd.Series(strange_walk, name='Strange Walk').cumsum().round(2)

strange_walk.plot()

class SeriesSparkline(v.VuetifyTemplate):
    name = Unicode('').tag(sync=True)
    value = List([1,2,3]).tag(sync=True)
    template = Unicode("""
    <template>
      <v-card
        class="mx-auto text-center"
        color="green"
        dark
        max-width="600"
      >
        <v-card-text>
          <v-sheet color="rgba(0, 0, 0, .12)">
            <v-sparkline
              :value="value"
              color="rgba(255, 255, 255, .7)"
              height="100"
              padding="24"
              stroke-linecap="round"
              smooth
            >
              <template v-slot:label="item">
                {{ item.value }}
              </template>
            </v-sparkline>
          </v-sheet>
        </v-card-text>

        <v-card-text>
          <div class="display-1 font-weight-thin">{{ name }}</div>
        </v-card-text>
      </v-card>
    </template>
    """).tag(sync=True)
    
    def __init__(self, *args, 
                 data=pd.Series(),
                 **kwargs):
        super().__init__(*args, **kwargs)
        self.name = data.name
        self.value = data.tolist()
        
s = SeriesSparkline(data=strange_walk)

s