<template>
  <div class="setting-wrapper">
    <div class="banner flex flex-center flex-col">
      <div class="title">Settings</div>
      <div class="slogan">Manage your account settings and preferences</div>
    </div>
    <div class="setting-content">
      <div class="setting-item profile-container flex">
        <div class="label-container">
          <div class="label">Profile</div>
          <div class="label-desc">
            Update your display name, avatar, social links and account security.
          </div>
        </div>
        <div class="context-container">
          <div class="info flex align-center">
            <div class="thumb relative">
              <SvgIcon name="ThumbEdit" size="30" class="edit-icon" />
            </div>
            <div class="name-email flex flex-col">
              <div class="name">{{ userData.firstName }} {{ userData.lastName }}</div>
              <div class="email">{{ userData.email }}</div>
            </div>
          </div>
          <div class="form-container flex flex-col">
            <div class="flex col-gap-2">
              <div class="form-item">
                <div class="form-item-label">FIRST NAME</div>
                <div class="form-item-value name">
                  <el-input v-model="userData.firstName" placeholder="First Name" />
                </div>
              </div>
              <div class="form-item">
                <div class="form-item-label">LAST NAME</div>
                <div class="form-item-value name">
                  <el-input v-model="userData.lastName" placeholder="Last Name" />
                </div>
              </div>
            </div>
            <div class="form-item">
              <div class="form-item-label">USERNAME</div>
              <div class="form-item-value">
                <el-input v-model="userData.username" placeholder="Username" />
              </div>
            </div>
            <div class="form-item">
              <div class="form-item-label">ROLE</div>
              <div class="form-item-value noborder radio">
                <Radio multiple v-model="userData.role" :options="roleList" />
              </div>
            </div>
          </div>
          <div class="social-links">
            <div class="title">SOCIAL LINKS</div>
            <div class="links-list flex flex-col">
              <div
                class="links-item flex align-center"
                v-for="(item, index) in userData.links"
                :key="item"
              >
                <div class="link-index">link {{ index + 1 }}</div>
                <div class="link-href flex-1">
                  <el-input v-model="userData.links[index]" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gap" />
      <div class="setting-item security flex">
        <div class="label-container">
          <div class="label">Security</div>
          <div class="label-desc">Manage your login email and password.</div>
        </div>
        <div class="context-container">
          <div class="security-section">
            <div class="security-row flex align-center">
              <div class="security-main flex-1">
                <div class="security-label">EMAIL</div>
                <div class="security-value">{{ userData.email }}</div>
              </div>
              <button type="button" class="small-action-btn" @click="resetEmailDraft">
                CANCEL
              </button>
            </div>
            <div class="security-row">
              <div class="security-label">NEW EMAIL ADDRESS</div>
              <div class="security-input-wrap verify-input">
                <el-input v-model="userData.newEmail" placeholder="Enter new email" />
                <button type="button" class="verify-btn">Verify</button>
              </div>
            </div>
            <div class="inner-divider" />
            <div class="security-row flex align-center">
              <div class="security-main flex-1">
                <div class="security-label">PASSWORD</div>
                <div class="security-value password-mask">.........</div>
              </div>
              <button type="button" class="small-action-btn" @click="resetPasswordDraft">
                CANCEL
              </button>
            </div>
            <div class="security-row">
              <div class="security-label">NEW PASSWORD</div>
              <div class="security-input-wrap">
                <el-input
                  v-model="userData.newPassword"
                  type="password"
                  show-password
                  placeholder="Enter new password"
                />
              </div>
              <div class="security-tip">You must satisfy ALL password conditions to register.</div>
            </div>
            <div class="security-row">
              <div class="security-label">CURRENT PASSWORD</div>
              <div class="security-input-wrap">
                <el-input
                  v-model="userData.currentPassword"
                  type="password"
                  show-password
                  placeholder="Confirm with your password"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gap" />
      <div class="setting-item region flex">
        <div class="label-container">
          <div class="label">Language &amp; Region</div>
          <div class="label-desc">Set your preferred language, region and currency display.</div>
        </div>
        <div class="context-container">
          <div class="region-section">
            <div class="region-row">
              <div class="security-label">DISPLAY LANGUAGE</div>
              <div class="select-wrap">
                <el-select v-model="userData.language" placeholder="Select language">
                  <el-option v-for="item in languageList" :key="item" :label="item" :value="item" />
                </el-select>
              </div>
            </div>
            <div class="region-row">
              <div class="security-label">REGION</div>
              <div class="select-wrap">
                <el-select v-model="userData.region" placeholder="Select region">
                  <el-option v-for="item in regionList" :key="item" :label="item" :value="item" />
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gap" />
      <div class="action-container flex">
        <button type="button" class="save-btn">SAVE CHANGE</button>
        <button type="button" class="discard-btn" @click="handleDiscard">DISCARD</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Radio from './components/Radio.vue'

const userData = ref({
  firstName: 'Alexandra',
  lastName: 'Chen',
  email: 'alexandra.chen@example.com',
  username: '@alexandra.chen',
  role: [],
  links: ['https://instagram.com/username', 'https://...'],
  newEmail: '',
  newPassword: '',
  currentPassword: '',
  language: 'English',
  region: 'Hong Kong SAR'
})

const roleList = [
  'Fashion Enthusiast',
  'Content Creator',
  'Student',
  'Retail / Buyer',
  'Fashion Designer',
  'Brand / Business',
  'PR & Communications',
  'Stylist',
  'Graphic Designer',
  '3D Artist',
  'Other'
].map((el) => ({ name: el, value: el }))

const languageList = ['English', 'Chinese', 'Japanese']
const regionList = ['Hong Kong SAR', 'Mainland China', 'Singapore', 'United Kingdom']

const createDefaultData = () => ({
  firstName: 'Alexandra',
  lastName: 'Chen',
  email: 'alexandra.chen@example.com',
  username: '@alexandra.chen',
  role: [],
  links: ['https://instagram.com/username', 'https://...'],
  newEmail: '',
  newPassword: '',
  currentPassword: '',
  language: 'English',
  region: 'Hong Kong SAR'
})

const resetEmailDraft = () => {
  userData.value.newEmail = ''
}

const resetPasswordDraft = () => {
  userData.value.newPassword = ''
  userData.value.currentPassword = ''
}

const handleDiscard = () => {
  userData.value = createDefaultData()
}
</script>

<style lang="less" scoped>
.setting-wrapper {
  height: 100%;
  overflow-y: auto;
  .banner {
    height: 14.8rem;
    row-gap: 1.2rem;
    background-color: #fafaf9;
    .title {
      font-family: 'KaiseiOpti-Bold';
      font-weight: 700;
      font-size: 4rem;
      line-height: 3.6rem;
    }
    .slogan {
      font-family: 'KaiseiOpti-Regular';
      font-size: 1.6rem;
      line-height: 2.4rem;
    }
  }
  .setting-content {
    padding: 0 18rem 12rem;
    .setting-item {
      column-gap: 21.4rem;
      padding-top: 4rem;
      .label-container {
        width: 27.6rem;
        font-family: 'KaiseiOpti-Medium';
        .label {
          font-weight: 500;
          font-size: 2.8rem;
          color: #232323;
        }
        .label-desc {
          margin-top: 2rem;
          font-size: 1.6rem;
          color: #666666;
        }
      }
      .context-container {
        .info {
          column-gap: 2.6rem;
          margin-bottom: 3.6rem;
          .thumb {
            width: 8rem;
            height: 8rem;
            border-radius: 50%;
            background-color: #999;
            .edit-icon {
              position: absolute;
              width: 3rem;
              height: 3rem;
              right: 0;
              bottom: 0;
              border: 0.1rem solid #fff;
              border-radius: 50%;
            }
          }
          .name-email {
            font-family: 'KaiseiOpti-Medium';
            row-gap: 0.6rem;
            .name {
              font-size: 2.4rem;
              color: #232323;
              line-height: 3.6rem;
            }
            .email {
              font-size: 1.8rem;
              color: #979797;
              line-height: 2.4rem;
            }
          }
        }
        .col-gap-2 {
          column-gap: 2rem;
        }
        .form-container {
          row-gap: 3rem;
          .form-item {
            .form-item-label {
              font-family: 'KaiseiOpti-Medium';
              font-size: 1.4rem;
              color: #979797;
              margin-bottom: 0.8rem;
            }
            .form-item-value {
              border: 0.1rem solid #979797;
              &.noborder {
                border: none;
              }
              &.name {
                width: 28.4rem;
              }
              &.radio {
                width: 58rem;
              }
              :deep(.el-input) {
                height: 4rem;
                .el-input__wrapper {
                  box-shadow: none;
                  padding: 0 2rem;
                  .el-input__inner {
                    font-family: 'KaiseiOpti-Regular';
                    color: #232323;
                    font-size: 1.6rem;
                  }
                }
              }
            }
          }
        }
        .social-links {
          margin-top: 5.8rem;
          font-family: 'KaiseiOpti-Medium';
          .title {
            font-size: 1.4rem;
            color: #585858;
            margin-bottom: 2rem;
          }
          .links-list {
            row-gap: 0.8rem;
          }
          .links-item {
            column-gap: 3.4rem;
            .link-index {
              font-size: 1.4rem;
              color: #979797;
            }
            .link-href {
              color: #979797;
              border: 0.1rem solid #979797;
              :deep(.el-input) {
                height: 4rem;
                .el-input__wrapper {
                  box-shadow: none;
                  padding: 0 2rem;
                  .el-input__inner {
                    font-family: 'KaiseiOpti-Regular';
                    color: #979797;
                    font-size: 1.6rem;
                  }
                }
              }
            }
          }
        }
      }
    }
    .gap {
      height: 0.05rem;
      margin-top: 6rem;
      background-color: #c4c4c4;
    }
    .security,
    .region {
      .context-container {
        width: 58rem;
      }
    }
    .security-section,
    .region-section {
      width: 58rem;
    }
    .security-row,
    .region-row {
      & + .security-row,
      & + .region-row {
        margin-top: 3rem;
      }
    }
    .security-label {
      margin-bottom: 0.8rem;
      font-family: 'KaiseiOpti-Medium';
      font-size: 1.4rem;
      line-height: 2.4rem;
      color: #585858;
    }
    .security-value {
      height: 4rem;
      display: flex;
      align-items: center;
      font-family: 'KaiseiOpti-Regular';
      font-size: 1.6rem;
      line-height: 2.4rem;
      color: #232323;
    }
    .password-mask {
      font-family: 'KaiseiOpti-Bold';
      letter-spacing: 0.08rem;
    }
    .security-tip {
      margin-top: 0.8rem;
      font-family: 'KaiseiOpti-Regular';
      font-size: 1.2rem;
      line-height: 1.6rem;
      color: #9f9f9f;
    }
    .security-input-wrap,
    .select-wrap {
      width: 58rem;
      border: 0.1rem solid #979797;
      :deep(.el-input),
      :deep(.el-select) {
        width: 100%;
        height: 4rem;
      }
      :deep(.el-input__wrapper),
      :deep(.el-select__wrapper) {
        min-height: 4rem;
        box-shadow: none;
        border-radius: 0;
        padding: 0 2rem;
      }
      :deep(.el-input__inner),
      :deep(.el-select__selected-item),
      :deep(.el-select__placeholder) {
        font-family: 'KaiseiOpti-Regular';
        font-size: 1.6rem;
        color: #232323;
      }
      :deep(.el-input__inner::placeholder) {
        color: #9f9f9f;
      }
    }
    .verify-input {
      display: flex;
      align-items: stretch;
      :deep(.el-input) {
        flex: 1;
      }
    }
    .verify-btn {
      width: 7.8rem;
      border: none;
      border-left: 0.1rem solid #979797;
      background: #fff;
      font-family: 'KaiseiOpti-Medium';
      font-size: 1.4rem;
      color: #232323;
      cursor: pointer;
    }
    .small-action-btn {
      width: 10rem;
      height: 3.2rem;
      border: 0.1rem solid #c4c4c4;
      background: #f6f6f6;
      font-family: 'KaiseiOpti-Bold';
      font-size: 1.2rem;
      line-height: 2.6rem;
      color: #232323;
      cursor: pointer;
    }
    .inner-divider {
      height: 0.05rem;
      margin: 2.8rem 0 3rem;
      background-color: #c4c4c4;
    }
    .action-container {
      justify-content: center;
      column-gap: 1.2rem;
      margin-top: 2.8rem;
    }
    .save-btn,
    .discard-btn {
      height: 4.4rem;
      font-family: 'KaiseiOpti-Bold';
      font-size: 1.6rem;
      cursor: pointer;
    }
    .save-btn {
      width: 23.6rem;
      border: 0.1rem solid #232323;
      background: #232323;
      color: #fff;
    }
    .discard-btn {
      width: 12rem;
      border: 0.1rem solid #c4c4c4;
      background: #fff;
      color: #232323;
    }
  }
}
</style>
